Kann CSS Pixeleinheiten verwenden?

Die Pixeleinheit kann in CSS verwendet werden; die Pixeleinheit bezieht sich auf die Einheit relativ zur Bildschirmauflösung und ist eine relative Längeneinheit, die in CSS als Pixeleinheit verwendet wird, um die Größe oder den Abstand von Elementen anzupassen ;Diese Pixellänge hat nichts mit den auf dem Monitor angezeigten Textbildschirmpixeln zu tun.

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

Kann CSS Pixeleinheiten verwenden

Kann CSS Pixeleinheiten verwenden

Der Name der px-Einheit ist Pixel, Pixel (px) ist relativ zur Bildschirmauflösung des Monitors, und diese Pixellänge hängt mit der Länge des Pixels zusammen Ihr Monitor Der Text, den Sie sehen, hat nichts mit den Bildschirmpixeln zu tun.

Und es handelt sich immer um eine Annäherung an ein bestimmtes Gerät (das Prinzip besteht darin, so nah wie möglich am Referenzpixel zu sein).

px ist eigentlich eine Einheit, die in Grad gemessen wird.

Pixel sind eine Längeneinheit, die dem Browser mitteilt, wie er die Größe oder den Abstand von Elementen ändern soll.

px Pixel (CSS-Pixel)

px ist die relative Länge.

CSS-Pixel:

Auch als virtuelles Pixel, geräteunabhängiges Pixel oder logisches Pixel bekannt, kann es 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 (d. h. 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 dargestellten Pixel können sich ändern (das ist der zweite Aspekt der Relativität von CSS-Pixeln).

px ist eigentlich die Abkürzung für Pixel, die die Grundeinheit der Bildanzeige darstellt und weder eine bestimmte physikalische Größe noch ein A-Punkt oder ein kleiner Punkt ist quadratisch, sondern ein abstraktes Konzept. 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, die Standardeinstellung In diesem Fall sollte 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, HTML-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonKann CSS Pixeleinheiten verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!