Was ist die Einheit von CSS px?

In CSS steht px für Pixel, was auf Chinesisch „Pixel“ bedeutet. Es ist die digitale Bildlängeneinheit des Computersystems. Es handelt sich um eine relative Längeneinheit im Verhältnis zur Bildschirmauflösung. Die Auflösung eines typischen Computermonitors beträgt 96 DPI, was bedeutet, dass 1 Pixel „1/96“ Zoll entspricht.

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

px ist die Abkürzung für Pixel, die die Grundeinheit der Bildanzeige darstellt. Sie wird aus dem Englischen „Pixel“ übersetzt und ist die gebräuchliche Abkürzung des englischen Wortes „Bild“. „Element“, um Pixel zu erhalten, daher bedeutet „Pixel“ „Bildelement“, manchmal auch Pel (Bildelement) genannt.

px (Pixel, Pixel): Es handelt sich um eine virtuelle Längeneinheit, die die digitale Bildlängeneinheit des Computersystems darstellt. Wenn px in physische Länge umgewandelt werden soll, ist die Genauigkeit DPI (Dots Per Inch, Pixel pro Zoll). muss beim Scannen und Drucken angegeben werden. Normalerweise gibt es eine DPI-Option. Der Standardwert für Windows-Systeme ist 96 dpi und der Standardwert für Apple-Systeme ist 72 dpi.

In CSS ist px eine relative Längeneinheit, die sich auf die Bildschirmauflösung bezieht.

• Auf demselben Gerät kann sich der durch jedes CSS-Pixel dargestellte physische Pixel ändern (d. h. der erste Aspekt der Relativität von CSS-Pixeln);

• Zwischen verschiedenen Geräten jeweils 1 Der durch jedes CSS dargestellte physische Pixel Pixel können geändert werden (d. h. der zweite Aspekt der Relativität von CSS-Pixeln);

Verschiedene Geräte haben unterschiedliche grundlegende Bildeinheiten, wie z. B. den Punktabstand des Monitors, der berücksichtigt werden kann Die physischen Pixel der Anzeige. Der Punktabstand aktueller LCD-Monitore liegt im Allgemeinen zwischen 0,25 mm und 0,29 mm. Die Tintenpunkte des Druckers können auch als physische Pixel des Druckers betrachtet werden. 300 DPI entsprechen 0,085 mm und 600 DPI entsprechen 0,042 mm.

Beachten Sie, dass sich das, was wir normalerweise als Monitorauflösung bezeichnen, tatsächlich auf die vom Desktop eingestellte Auflösung bezieht, nicht auf die physische Auflösung des Monitors. Da sich das Anzeigeprinzip von LCD-Monitoren jedoch von dem von CRT-Monitoren unterscheidet, ist der Anzeigeeffekt nur dann am besten, wenn die Desktop-Auflösung mit der physischen Auflösung übereinstimmt physikalische Auflösung des Monitors Die Auflösung ist gleich.

Gemäß der Definition der CSS-Spezifikation ist px in CSS eine relative Länge, die sich auf die Auflösung des Anzeigegeräts bezieht. Bei diesem Anzeigegerät handelt es sich in der Regel um einen Computermonitor. Die Auflösung eines typischen Computermonitors beträgt 96 DPI, d. Es ist also unwahrscheinlich, dass es genau 1/96 Zoll beträgt, aber es liegt nur nahe daran.

Im Allgemeinen ist px das physische Pixel des entsprechenden Geräts. Wenn sich die Auflösung des Ausgabegeräts jedoch stark vom Computermonitor unterscheidet, kommt es zu Problemen mit dem Ausgabeeffekt. Beispielsweise ist die Auflösung der Druckerausgabe auf Papier viel höher als die des Computerbildschirms. Wenn die physischen Pixel des Geräts direkt ohne Skalierung verwendet werden, werden die Fotos auf dem Computer mit einem 600-DPI-Drucker etwa sechsmal so groß sein kleiner als bei der Betrachtung auf einem Monitor.

So schreibt CSS vor, dass der Browser in diesem Fall den Pixelwert skalieren und anpassen soll, um ein allgemein konsistentes Leseerlebnis zu gewährleisten. Das heißt, die Länge eines bestimmten Pixels muss auf verschiedenen Geräteausgängen immer ähnlich groß erscheinen.

Wie stellt man das sicher? Die direkte Konvertierung entsprechend der Größe der physischen Pixel des Geräts ist natürlich eine Möglichkeit, aber CSS berücksichtigt mehr. Es empfiehlt, die Konvertierung gemäß dem „Referenzpixel“ (Referenzpixel) durchzuführen.

Die von den Augen gesehene Größe hängt vom Betrachtungswinkel ab. Der Betrachtungswinkel hängt von der tatsächlichen Größe des Objekts und seiner Entfernung vom Auge ab. Ein 1 Meter großes Objekt in 10 Metern Entfernung sieht fast genauso groß aus wie ein 10 cm großes Objekt in 1 Meter Entfernung. Das ist normal, wenn man sagt, dass ein Berg durch ein Blatt nicht gesehen werden kann.

Die CSS-Spezifikation verwendet also den Betrachtungswinkel, um „Referenzpixel“ zu definieren. 1 Referenzpixel ist 1 Punkt (d. h. 1/96 Zoll), wenn man die Ausgabe eines Geräts mit einer Auflösung von 96 DPI (d. h. 1 Zoll 96 Punkte) betrachtet. aus einer Armlänge.

Bitte beachten Sie diesen Unterschied – der durch die CSS-Spezifikation definierte Referenzpixel ist nicht 1/96 Zoll, sondern der Betrachtungswinkel von 1/96 Zoll bei Armlänge. Es wird allgemein angenommen, dass die durchschnittliche menschliche Armlänge 28 Zoll beträgt, sodass der Blickwinkel mit 0,0213 Grad berechnet werden kann. (d. h. (1/96) Zoll / (28 Zoll * 2 * PI / 360 Grad))

Wenn wir unterschiedliche Geräteausgänge verwenden, ist der typische Abstand zwischen den Augen und dem Geräteausgang unterschiedlich. Beispielsweise befindet sich ein Computermonitor normalerweise auf Armeslänge entfernt, während er beim Lesen von Büchern und Papier (entsprechend der Geräteausgabe eines Druckers) normalerweise näher ist. Wenn Sie fernsehen, ist der Abstand größer. Die allgemeine Empfehlung lautet beispielsweise 2,5 bis 3 Mal so groß wie die Diagonale des Fernsehbildschirms. Wenn Sie einen 42-Zoll-Farbfernseher haben, beträgt der Abstand fast 3 Meter. Wenn Sie sich einen Film ansehen ... Ich weiß nicht, wie weit es ist, Sie können es selbst messen.

1 Referenzpixel:

ist 0,26 mm für einen Computermonitor (d. h. 1/96 Zoll);

ist 0,20 mm für einen Laserdrucker (unter der Annahme eines typischen Leseabstands von 55 cm, d. h. 21 Zoll);

Bei der Konvertierung wird bei einem 300-DPI-Drucker (d. h. jeder Punkt ist 1/300 Zoll) normalerweise 1 Pixel auf 3 Punkte gerundet, was etwa 0,25 mm entspricht, und bei einem 600-DPI-Drucker kann es auf 5 Punkte gerundet werden 0,21 mm.

Zusammenfassend ist px eine relative Einheit und immer ein ungefährer Wert für ein bestimmtes Gerät (das Prinzip besteht darin, so nah wie möglich am Referenzpixel zu sein).

Wenn man unter absoluten Einheiten jedoch die absolute Kontrolle über den Ausgabeeffekt versteht, sieht die Sache ganz anders aus. Was das Hauptobjekt der Webseitenausgabe betrifft, den Computerbildschirm, kann px als Referenzeinheit betrachtet werden, die mit der Desktop-Auflösung übereinstimmt. Wenn es sich um einen LCD-Bildschirm handelt, stimmt er fast immer mit der physischen Auflösung überein LCD-Bildschirm – das heißt, dass der vom Webdesigner festgelegte 1 Pixel „1 Punkt auf dem Monitor des Benutzers ist, der diese Webseite endlich sieht“! Im Gegenteil, diese absoluten Einheiten sind überhaupt nicht absolut.

Da absolute Einheiten wie cm oder pt bei der Anzeige auf dem Bildschirm in Pixel konvertiert werden müssen und diese Konvertierung nicht auf der tatsächlichen physischen Länge der Pixel basiert (der Browser muss dies nicht wissen, und es ist unmöglich, dies zu wissen). Der aktuelle Monitor) Was ist die physische Länge von 1 Pixel?), wird jedoch anhand der vom Desktop festgelegten DPI berechnet. Mit anderen Worten: Der Webdesigner gibt an, dass eine bestimmte Schriftart 12pt (d. h. 1/6 Zoll oder 4,2 mm) hat. Tatsächlich ist es fast unmöglich, genau 12pt, sondern nur 16px in der Nähe von 12pt zu haben (). entsprechend 96DPI konvertiert). Wenn Ihr Bildschirmabstand 0,29 mm beträgt, beträgt er tatsächlich 4,64 mm oder 13,15 pt. Wenn Sie den Desktop auf eine große Schriftart (120 DPI) ändern, entsprechen die endgültigen 12 Punkte 20 Pixel. Gemäß dem Punktabstand von 0,29 mm beträgt der endgültige Effekt 16,44 Punkte.

In der Vergangenheit wurde Webdesignern empfohlen, px nicht zu verwenden. Ein Grund dafür ist, dass Benutzer die Desktop-DPI nach ihren eigenen Bedürfnissen anpassen und so die tatsächliche Länge der absoluten Länge steuern können (Zungenbrecher).

Allerdings ist das tatsächlich verdächtig. Da die tatsächliche Länge der absoluten Länge nach Bedarf angepasst werden kann, gibt es keinen Grund, warum eine relative Länge wie px nicht nach Bedarf angepasst werden kann. Genau wie beim tatsächlichen Drucken eines Fotos kann man es natürlich beliebig skalieren, in px eingestellte Schriftarten und Bilder können bei der tatsächlichen Anzeige skaliert werden – dann entsprechen die vom Webdesigner angegebenen 1px nicht mehr den 1px des Desktops des Benutzers. stattdessen könnte es 1,2px oder 1,5px oder anderen Werten entsprechen.

In der Vergangenheit war die Option zum Anpassen der Schriftgröße in Browsern nur für die absolute Länge wirksam (entspricht der Anpassung der DPI im Browser) und war für px nicht wirksam. Dies kann nur als Designproblem früherer Browser bezeichnet werden , kein inhärentes Problem von px. Browser unterstützen jetzt die Skalierung von Schriftarten in px. Wie bei Firefox können Benutzer auch Schriftarten einzeln oder auch Bilder skalieren. Daher ist es durchaus möglich, alle Pixel als „präzises Design auf Pixelebene“ zu verwenden, und es ist auch eine Designmethode, die ich für vernünftig halte. Schließlich soll px in CSS ein konsistentes Leseerlebnis gewährleisten. Ob es sich um ein flüssiges Layout oder ein festes Layout handelt und ob es sich an unterschiedliche Auflösungen anpassen lässt, ist ein anderes Thema und hängt nicht direkt damit zusammen, ob px als Einheit verwendet werden soll.

(Teilen von Lernvideos: CSS-Video-Tutorial)

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