Was bedeutet px in CSS?

In CSS lautet der vollständige Name „Pixel“, was auf Chinesisch „Pixel“ bedeutet. Es bezieht sich auf das logische Pixel, das im CSS-Stilcode verwendet wird.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

px Pixel (CSS Pixel)

px ist die Abkürzung für Pixel, die Pixeleinheit und Grundeinheit für die Bildanzeige. In CSS ist px eine relative Längeneinheit im Verhältnis zur Bildschirmauflösung.

CSS-Pixel:

auch als virtuelles Pixel, geräteunabhängiges Pixel oder logisches Pixel bekannt, kann aber auch als intuitives Pixel verstanden werden. CSS-Pixel sind ein Webprogrammierungskonzept, das sich auf logische Pixel bezieht, die im Code im CSS-Stil verwendet werden. Beispielsweise beträgt die CSS-Pixelanzahl des iPhone 6 375 x 667 Pixel.

Virtuelle Pixel können als „intuitive“ Pixel verstanden werden, abstrakte Einheiten, die von CSS und JS verwendet werden. Alle Längen im Browser sind in CSS-Pixeln angegeben und die Einheit der CSS-Pixel ist px.

In der CSS-Spezifikation können Längeneinheiten in zwei Kategorien unterteilt werden: absolute Einheiten und relative Einheiten. Px ist eine relative Einheit im Verhältnis zu Gerätepixeln.

Auf demselben Gerät kann sich der von jedem CSS-Pixel dargestellte physische Pixel ändern (das ist der erste Aspekt der Relativität von CSS-Pixeln);
Zwischen verschiedenen Geräten kann sich der von jedem CSS-Pixel dargestellte physische Pixel ändern. Die physischen Pixel können sich ändern ( das heißt, der zweite Aspekt der Relativität von CSS-Pixeln); . Achten Sie also darauf, den Kontext zu verstehen, wenn Sie über Pixel sprechen! Stellen Sie sicher, dass Sie den Kontext verstehen! Stellen Sie sicher, dass Sie den Kontext verstehen!

Nehmen Sie ein Beispiel, um die Relativität von CSS-Pixeln zu verstehen.

Angenommen, wir öffnen eine Seite mit einem PC-Browser. Die Breite des Browsers beträgt zu diesem Zeitpunkt 800 Pixel und es gibt auch einen 400 Pixel breiten Elementcontainer auf Blockebene die Seite. Es ist offensichtlich, dass der Blockcontainer an dieser Stelle die Hälfte der Seite einnehmen sollte.

Aber wenn wir in die Seite hineinzoomen (über die „Strg-Taste“ plus die „+-Taste“), beträgt der Zoom 200 %, also das Doppelte der Originalgröße. Zu diesem Zeitpunkt nimmt der Blockcontainer horizontal den gesamten Browser ein.

Das Paradoxe ist, dass wir zu diesem Zeitpunkt weder die Größe des Browserfensters noch die CSS-Breite des Blockelements geändert haben, es aber doppelt so groß aussieht – das liegt daran, dass wir die CSS-Pixel auf das Original um das Zweifache vergrößert haben.

Wenn CSS-Pixel im Verhältnis 1:1 die gleiche Größe wie Bildschirmpixel haben:

CSS-Pixel (schwarze Ränder) beginnen zu strecken, 1 CSS-Pixel ist größer als 1 Bildschirmpixel

Das heißt, in diesem Fall sollte standardmäßig ein CSS-Pixel der Breite eines physischen Pixels entsprechen, aber durch die Vergrößerungsoperation des Browsers entspricht ein CSS-Pixel der Breite von zwei Gerätepixeln. Später werden Sie eine kompliziertere Situation sehen. Auf Geräten mit hohem PPI entsprechen CSS-Pixel sogar standardmäßig der Größe mehrerer physischer Pixel.

Wie Sie dem obigen Beispiel entnehmen können, handelt es sich bei CSS-Pixeln immer nur um einen relativen Wert.

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonWas bedeutet px in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!