Es gibt drei Maßeinheiten in HTML, eine ist px, der Einheitenname ist Pixel, die zweite ist em, der Einheitenname ist relative Längeneinheit, die dritte ist pt, der Einheitenname ist Punkt (Point), wir werden Analysieren Sie die Funktionen dieser drei Einheiten
Der Name der px-Einheit ist Pixel, eine relative Längeneinheit. Pixel (px) ist die inländische Empfehlung im Verhältnis zur Bildschirmauflösung
em Die Einheitennamen sind relative Längeneinheiten. Im Verhältnis zur Schriftgröße des Textes im aktuellen -Objekt wird es im Ausland häufiger verwendet: HTML-EM-Tag, HTML-EM-Hervorhebungs-Tag
pt-Einheitsname ist Punkt (Punkt) , absolute Längeneinheit Im Allgemeinen verwenden ältere Versionen von Tabellen Längengrößeneinheiten, diese werden jedoch derzeit grundsätzlich 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 eine separate Texteinheit.
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
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.
HTML-Einheitenvergleichsfall
1. Einfaches Beispiel:
Breite:300px mit einer Breite von 300 Pixeln
Breite:300pt mit einer Breite von 300 Punkte
Breite: 300em Breite ist 300 relative Länge
Oben haben wir verschiedene Einheitenbeispiele für denselben Wert festgelegt
Stellen Sie unterschiedliche Längeneinheiten em px pt ein, damit der Text angezeigt wird Wirkung:
CSS-Code:
HTML-Code:
.div-px{ font-size:12px}
.div-pt{ font-size:12pt}
.div-em{ font-size:2em}<div class="div-px">我是div</div> <div class="div-pt">我是div</div> <div class="div-em">我是div</div>
Die Standardschrifthöhe jedes Browsers ist 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.
12px entspricht einer Länge von 9pt;
12px entspricht einer Länge von 0,75em;
Im Allgemeinen verwenden wir em in px konvertieren Mehr
Erweiterte em in 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-Tagswie zum Beispiel: *{font-size=62,5%}
Das folgende Layout kann gemäß den folgenden Techniken eingestellt werden. Die em-Einheitfont-size:1.2em entspricht der Schriftgröße :12pxfont-size:1.4em ist gleich font-size:14px Analog dazu betragen die Einheiten em und px nach der anfänglichen Schriftgröße = 62,5 % nur noch das Zehnfache Um die Berechnung und Einstellung zu erleichtern, wird ein anderer Wert verwendet. em-Einheit hat die folgenden Eigenschaften: 1. Der Wert von em ist nicht festgelegt; 2. em wird
die Schriftart von
erben Größe des übergeordneten Elements. 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. Empfohlene Webseiteneinheit Um Fehler bei der Einheitenumrechnung zu vermeiden, wird empfohlen, PX (Pixel) als Webseitenproduktionseinheit zu verwenden.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. Hier empfehlen wir auch die Verwendung von px (Pixel) als Größen- und Längeneinheit der Webseite, die mit der Pixeleinheit des Browsers übereinstimmt und auch zur einfacheren Berechnung der Längengröße dient.
Über px pt em-Einheitszusammenfassung
1) Empfehlen Sie px Pixel als Einheit: Normalerweise verwenden wir mehr px (Pixel als Einheit), gefolgt von em-Einheit, normalerweise wird empfohlen, dass jeder verwendet px als Einheit;
2), unsere Anzeigeauflösung ist in px Pixel
3), unsere QQ-Screenshots sind ebenfalls in px Pixel.
Wir werden hier die Einheiten von HTML vorstellen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
So verwenden Sie das
So schreiben Sie die HTML-Dokumenttypdeklaration
So geben Sie Leerzeichen in HTML ein
Das obige ist der detaillierte Inhalt vonWelche Maßeinheiten gibt es in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
