CSS Academy · Lektion

Absolute Einheiten: px, pt und cm

Lernen Sie, wann Sie feste absolute Einheiten wie Pixel, Punkt und Zentimeter verwenden.

Absolute Einheiten: px, pt und cm ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Absolute und relative Einheiten

CSS-Einheiten lassen sich in zwei Kategorien einteilen: absolute (feste Messwerte aus der realen Welt) und relative (auf etwas anderes bezogen). Absolute Einheiten sind geräteunabhängige physische Maßeinheiten.

px — Pixel

Das Pixel (px) ist die am häufigsten verwendete absolute Einheit auf Bildschirmen. Bei Standardbildschirmen entspricht 1px = 1 Geräte-Pixel. Auf Bildschirmen mit hoher Pixeldichte (Retina) werden CSS-Pixel auf mehrere Geräte-Pixel abgebildet, sodass Elemente ihre visuelle Größe beibehalten.

<button class="button">10px 20px padding</button>

pt — Punkt

Ein Punkt (pt) ist eine Einheit aus dem Printdesign: 1pt = 1/72 Zoll. In CSS entspricht 1pt = 4/3px (etwa 1,33px). Diese Einheit wird hauptsächlich in Print-Stylesheets für Typografie verwendet.

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm, mm, in — Physische Einheiten

CSS unterstützt Zentimeter (cm), Millimeter (mm) und Zoll (in). Diese Einheiten sind für den Druck sinnvoll, auf Bildschirmen jedoch unzuverlässig, weil die Bildschirmauflösung variiert.

<div class="page">A4-width page (21cm), used for print layouts</div>

px auf Bildschirmen: Praxis

Für bildschirmbasierte Webgestaltung ist px die einzige praktikable absolute Einheit. Trotzdem wird davon abgeraten, px für Schriftgrößen zu verwenden, weil dadurch die Schriftgrößeneinstellungen des Browsers überschrieben werden.

Geräte-Pixelverhältnis

Moderne Bildschirme haben ein Geräte-Pixelverhältnis (DPR) > 1. Ein Retina-Bildschirm mit 2-facher Pixeldichte stellt pro CSS-Pixel 2 Geräte-Pixel dar. Deshalb müssen Bilder für hohe Pixeldichten die 2- oder 3-fache Anzeigegröße haben.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

Wann Sie px verwenden sollten

Verwenden Sie px für:

Rahmenbreiten (1px ist scharf)
Schatten und Transformationen
Breakpoints von Media Queries (wobei em-basierte Breakpoints robuster sind)
Fixierte UI-Elemente, bei denen eine exakte Pixelsteuerung erforderlich ist

Wann Sie px NICHT für Typografie verwenden sollten

Wenn Sie für html oder body font-size: 16px festlegen, überschreiben Sie in vielen Browsern die Barrierefreiheitseinstellung des Benutzers. Verwenden Sie stattdessen rem relativ zum Browserstandard.

Q — Viertelmillimeter

Die Einheit q entspricht 1/4 Millimeter. Sie wird in der japanischen Drucktypografie für eine präzise typografische Steuerung verwendet. Im allgemeinen Webdesign kommt sie nur selten zum Einsatz.

PC — Picas

Eine Pica (pc) entspricht 12 Punkten oder 1/6 Zoll. Wie Punkte sind Picas Druckeinheiten, die auf digitalen Bildschirmen nur selten benötigt werden.

Absolute Einheiten in Print-Stylesheets

Print-Stylesheets sind der wichtigste legitime Anwendungsfall für absolute Einheiten in CSS. Physische Einheiten sorgen dafür, dass die gedruckte Seite auf Papier genaue Abmessungen hat.

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

Kurzer Test

Welche absolute CSS-Einheit entspricht 1/72 Zoll?

Zusammenfassung

Absolute Einheiten sind feste Maße, die unabhängig von übergeordneten Elementen sind. px ist die praktische Einheit für Bildschirme. Physische Einheiten (pt, cm, in) werden in Print-Stylesheets verwendet. Vermeiden Sie px für Typografie – dadurch werden die Schriftgrößeneinstellungen des Benutzers überschrieben. Verwenden Sie stattdessen rem.

Häufig gestellte Fragen

Ist die Lektion „Absolute Einheiten: px, pt und cm“ kostenlos?

Ja — der vollständige Text von „Absolute Einheiten: px, pt und cm“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Absolute Einheiten: px, pt und cm“?

Lernen Sie, wann Sie feste absolute Einheiten wie Pixel, Punkt und Zentimeter verwenden. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Absolute Einheiten: px, pt und cm“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy