Verstehen Sie die Verwendung von HTML-PX-EM-PT-Längeneinheiten

html px em pt-Einheitsbereich

1. PXEMPT-Einheitseinführung – TOP

pxDer Einheitenname ist Pixel, relative Längeneinheit, Pixel (px) ist die inländische Empfehlung relativ zur Bildschirmauflösung
emDer Einheitenname ist Relative Längeneinheit. Im Verhältnis zur Schriftgröße des Textes im aktuellen Objekt wird es im Ausland häufiger verwendet. Erweiterte Lesart : HTML-EM-Tag, HTML-EM-Hervorhebungs-Tag
ptDer Einheitenname lautet Punkt (Punkt), Absolute Längeneinheit Im Allgemeinen verwenden ältere Versionen von Tabellen Längengrößeneinheiten, werden jedoch derzeit nicht mehr verwendet.

Kurze Einführung in HTML-Einheiten:

Px Pixel Pixel relative Längeneinheit.
Pt Point; absolute Längeneinheit
Em relative Längeneinheit, wobei em genauso geschrieben wird wie das „EM“ des HTML-Tags und hier em als separate Texteinheit verwendet wird.

1. In der Vergangenheit konnte der IE die Schriftgröße, die px als Einheit verwendete, nicht anpassen, aber jetzt unterstützt der IE dies fast und es wird empfohlen, px als Einheit zu verwenden.

2 . Der Grund für die Anpassung ist, dass Firefox px und em verwenden kann, aber mehr als 96 % der chinesischen Internetnutzer verwenden den IE-Browser (oder Kernel). .

px Pixel (Pixel). Relative Längeneinheit. Pixel px sind relativ zur Bildschirmauflösung des Monitors, und QQ-Screenshots verwenden auch PX als Längen- und Breiteneinheit.

em ist eine relative Längeneinheit. Die Schriftgröße relativ zum Text im aktuellen Objekt. Wenn die aktuelle Schriftgröße für Inline-Text nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers.

2. HTML-Einheitsvergleichsfall -

TOP

Einfaches Beispiel:

Breite: 300 PixelBreite:300pt Die Breite beträgt 300 Punkte
Breite:300em Die Breite beträgt 300 relative Länge
Oben haben wir verschiedene Einheitenbeispiele mit demselben Wert festgelegt

2. Stellen Sie unterschiedliche Längen für Text ein em px pt Einheit, um den Effekt zu sehen:

CSS-Code:

HTML-Code:

.pcss5-px {
    font-size:12px
}
.pcss5-pt {
    font-size:12pt
}
.pcss5-em {
    font-size:2em
}

3. Em- und px-Konvertierung -

<p class="pcss5-px">
    我是pcss5
</p>
<p class="pcss5-pt">
    我是pcss5
</p>
<p class="pcss5-em">
    我是pcss5
</p>

TOP

Die Standardschrifthöhe für jeden Browser beträgt 16 Pixel (16 Pixel). Alle unveränderten Browser entsprechen: 1em=16px. Dann 12px=0,75em, 10px=0,625em. Um die Konvertierung der Schriftgröße zu vereinfachen, müssen Sie im Body-Selektor in CSS die Schriftgröße = 62,5 % deklarieren, wodurch der em-Wert zu 16 Pixel * 62,5 % = 10 Pixel wird, also 12 Pixel = 1,2 Em, 10 Pixel = 1 Em , auch Das heißt, Sie müssen nur Ihren ursprünglichen px-Wert durch 10 teilen und dann zu em als Einheit wechseln.

12px entspricht einer Länge von 9pt;

12px entspricht einer Länge von 0,75em; Im Allgemeinen verwenden wir sie zum Konvertieren px mehr


Erweiterte em-zu-px-Konvertierung:

Die Standardschrifthöhe jedes Browsers beträgt 16px (16 Pixel). Alle unveränderten Browser entsprechen: 1em=16px. Dann 12px=0,75em, 10px=0,625em. Um die Konvertierung der Schriftgröße zu vereinfachen, müssen Sie im Body-Selektor in CSS die Schriftgröße = 62,5 % deklarieren, wodurch der em-Wert zu 16 Pixel * 62,5 % = 10 Pixel wird, also 12 Pixel = 1,2 Em, 10 Pixel = 1 Em , auch Das heißt, Sie müssen nur Ihren ursprünglichen px-Wert durch 10 teilen und dann zu em als Einheit wechseln.
Spezifische Nutzungsdauer:

Wir geben eine anfängliche Schriftgröße von 62,5 % für alle HTML-Tags anZum Beispiel: *{font-size=62,5 % }
Das folgende Layout kann gemäß den folgenden Techniken eingestellt werden:
font-size:1.2em ist gleich Font-size:12px
font-size:1.4em ist gleich Font-. size:14px
Analog dazu unterscheiden sich die Einheiten em und px nach der anfänglichen Schriftgröße = 62,5 % nur noch um das Zehnfache, was die Berechnung und Festlegung des em-Längenwerts erleichtert.

4. Die em-Einheit hat die folgenden Eigenschaften: -
TOP

1. Der Wert von em ist nicht festgelegt

2. em wird erben die übergeordnete Schriftgröße der Ebenenelemente.

Wenn wir beim Schreiben von CSS em als Einheit verwenden möchten, müssen wir auf zwei Punkte achten:

　1. Deklarieren Sie Font-size=62.5% im Body-Selektor;

2. Teilen Sie Ihren ursprünglichen px-Wert durch 10 und ändern Sie ihn dann zu em als Einheit.

　3. Berechnen Sie den em-Wert dieser vergrößerten Schriftarten neu. Vermeiden Sie wiederholte Angaben zu Schriftgrößen.

Damit soll das Phänomen 1,2 * 1,2 = 1,44 vermieden werden. Wenn Sie beispielsweise in #content die Schriftgröße als 1,2em deklarieren, kann die deklarierte Schriftgröße nur 1em und nicht 1,2em sein, da dieses Em nicht dieses Em ist und sich aufgrund der Übernahme der Schrifthöhe von # ändert. Inhalt Für 1em=12px.

Eine Ausnahme bilden jedoch chinesische 12-Pixel-Zeichen, d. Dieses Problem wurde von Jorux gelöst. Ändern Sie einfach 62,5 % in 63 % und es wird normal angezeigt. Der Grund kann sein, dass bei der Verarbeitung chinesischer Zeichen durch den IE die Genauigkeit von Gleitkommawerten begrenzt ist. Ich weiß nicht, ob es eine andere Erklärung gibt.

5. Empfohlene Webseiteneinheiten – TOP

Um Fehler bei der Einheitenumrechnung zu vermeiden wird empfohlen, PX (Pixel) als Webseite zu verwenden Produktionseinheit .

Das Obige führt Sie in die px-em-pt-Einheit und die Konvertierungsmethode ein. Im Allgemeinen verwendet die Längeneinheit, die wir jetzt verwenden, px als Längeneinheit. Auch hier empfehlen wir die Verwendung von px (Pixel) als Größen- und Längeneinheit der Webseite , was mit der Pixeleinheit des Browsers übereinstimmt und auch zur einfacheren Berechnung von Länge und Größe dient.

Über px pt em-Einheitszusammenfassung - TOP

1), empfohlene px-Pixeleinheit: Normalerweise verwenden wir mehr px (Pixeleinheit), gefolgt von em Unit, it Es wird normalerweise empfohlen, px als Einheit zu verwenden; unsere Anzeigeauflösung ist in px-Pixeln angegeben.
3) Unsere QQ-Screenshots sind ebenfalls in px-Pixeln angegeben.

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Verwendung von HTML-PX-EM-PT-Längeneinheiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!