Eine kurze Erläuterung der Größeneinheiten in CSS

Die Kompatibilität der Browser wird immer besser. Mobile Endgeräte sind grundsätzlich alle WebKit-basiert. Dabei kommen oft unterschiedliche Größen-/Längeneinheiten von CSS zum Einsatz. Hier eine Übersicht.

Überblick

Absolute Einheiten

• px: Pixel
• pt: Punkte
• pc: Picas
• in: Zoll
• mm: Millimeter
• cm: Zentimeter
• q: Viertel Millimeter 1/4 Millimeter

Relative Einheiten

• %: Prozentsatz
• em: Elementmeter berechnet die Größe anhand der Dokumentschriftart
• rem: Root-Element-Meter Berechnet die Größe basierend auf der Schriftart des Root-Dokuments (Body/HTML)
• Beispiel: Die Höhe des Dokumentzeichens „x“
• ch: die Breite des Dokuments Nummer "0"
• vh: Ansichtshöhe Sichtbarer Bereich Höhe
• vw: Ansichtsbreite Breite des sichtbaren Bereichs
• vmin: Ansicht min Die kleinere Größe der Breite oder Höhe des sichtbaren Bereichs
• vmax: View max Die größere Größe der Breite oder Höhe des sichtbaren Bereichs

Betrieb

calc: vier Rechenoperationen

Beispiele:

h1 {
    Breite: berechnet (100 % – 10 Pixel + 2 Rem);
}

Einheitsverhältnis

1 Zoll = 2,54 cm = 25,4 mm = 101,6 q = 72 pt = 6 pc = 96 px

ausführlich

Absolute Einheiten

px – Pixel

Die Pixel (px) beziehen sich auf die Bildschirmauflösung des Geräts.

div { Schriftgröße: 12px }
p { Texteinzug: 24px }

pt Punkte

1 pt = 1/72 Zoll

div { Schriftgröße: 10pt }
p { Höhe: 100pt }

pc Picas

Bewegliche Lettern mit zwölf Punkten (die beim Drucken verwendet werden) entsprechen der Größe der neuen Bleilettern Nr. 4 in meinem Land.

div { Schriftgröße: 10pc }
p { Höhe: 10 Stück }

in Zoll

div { Schriftgröße: 10 Zoll }
p { Höhe: 10 Zoll }

mm Millimeter

div { Schriftgröße: 10mm }
p { Höhe: 10mm }

cm Zentimeter

div { Schriftgröße: 10cm }
p { Höhe: 10cm }

q Viertel Millimeter 1/4 Millimeter

div { Schriftgröße: 20q }
p { Höhe: 100q }

Relative Einheiten

% Prozent

Relativ zur Breite des übergeordneten Elements

<Text>
    <div Klasse="übergeordnet">
        <div Klasse="Kinder"></div>
    </div>
</body>

<Stil>
.übergeordnet { Breite: 100px }
.Kinder { Breite: 66,6 % }
/* Die Breite der untergeordneten Elemente beträgt 66,6 Pixel */
</Stil>

em Element meter Berechnet die Größe basierend auf dem Dokument

Relativ zur Schriftgröße des Textes im aktuellen Dokumentobjekt. Wenn die Schriftgröße nicht angegeben ist, wird sie vom übergeordneten Element übernommen und so weiter, bis zum Textkörper. Wenn der Textkörper nicht angegeben ist, ist dies die Standardgröße des Browsers.

<Text>
    <div Klasse="Element"></div>
</body>

<Stil>
Körper {
    Schriftgröße: 14px;
}
.element {
    Schriftgröße: 16px;
    Breite: 2em;
    /* 2em === 32px */
}
</Stil>

rem Stammelement meter Berechnet die Größe basierend auf der Schriftart des Stammdokuments ( body/html ).

Relativ zur Schriftgröße des Textes im Stammdokumentobjekt ( body/html ). Wenn keine Schriftgröße angegeben ist, wird die Standardschriftgröße des Browsers übernommen.

<Text>
    <div Klasse="Element"></div>
</body>

<Stil>
Körper {
    Schriftgröße: 14px;
}
.element {
    Schriftgröße: 16px;
    Breite: 2rem;
    /* 2rem === 28px */
}
</Stil>

Beispiel: Dokumentzeichen "x" Höhe

Relativ zur Höhe des Zeichens „x“, normalerweise die halbe Schrifthöhe, oder relativ zur Standardschriftgröße des Browsers, wenn keine Schriftgröße angegeben ist.

Warum es x ist, weiß ich nicht.

<Text>
    <div Klasse="x"></div>
</body>

<Stil>
.X {
    Höhe: 1ex;
    Überlauf: versteckt;
    Hintergrund: #aaa;
}
</Stil>

ch Die Breite der Dokumentnummer "0"

Wie oben, relativ zur Breite der Zahl „0“.

<Text>
    <h1>Definieren Sie einen Container, der gerade breit genug ist, um 10 Nullen aufzunehmen:</h1>
    <div Klasse="0">0000000000</div>
</body>

<Stil>
.0 {
    Breite: 10ch;
    Überlauf: versteckt;
    Hintergrund: #ccc;
}
</Stil>

Ein Bild erklärt:

vh Ansichtshöhe / vw Ansichtsbreite - Sichtbarer Bereich

Relativ zur Höhe und Breite des sichtbaren Bereichs wird der sichtbare Bereich gleichmäßig in 100 Einheiten vh / vw aufgeteilt; der sichtbare Bereich bezieht sich auf den sichtbaren Bereich des Bildschirms, nicht auf das übergeordnete Element, und der Prozentsatz ist relativ zur Höhe und Breite des nächstgelegenen übergeordneten Elements, das ihn enthält.
Angenommen, der sichtbare Bereich des Geräts beträgt 900 Pixel in der Höhe und 750 Pixel in der Breite, dann gilt: 1 vh = 900 Pixel/100 = 9 Pixel, 1 vw = 750 Pixel/100 = 7,5 Pixel.

<Text>
    <h1>Artikeltitel</h1>
    <div Klasse="Element"></div>
    <div Klasse="volle Höhe"></div>
</body>

<Stil>
.element {
    Breite: 50vw;
    Höhe: 80vh;
    /* Wenn die Bildschirmhöhe 1000 Pixel beträgt, ist die Elementhöhe 800 Pixel, und das Gleiche gilt für vw*/
}
.volle Höhe {
    Höhe: 100vh;
    /* Einfaches Erreichen von Elementen mit der gleichen Höhe wie der Bildschirm */
}
h1 {
    Breite: 100vw;
    /* Legen Sie einen Titel fest, der die gleiche Breite wie der Bildschirm hat. Die Schriftgröße des Titels wird automatisch entsprechend der Breite des Browsers skaliert, um den Effekt der Synchronisierung von Schriftart und Ansichtsfenstergröße zu erzielen. */
}
</Stil>

vmin / vmax Die kleinere/größere Größe der Breite oder Höhe des sichtbaren Bereichs

Angenommen, die Browserbreite ist auf 1200 Pixel und die Höhe auf 800 Pixel eingestellt, dann ist 1vmax = 1200/100 Pixel = 12 Pixel, 1vmin = 800/100 Pixel = 8 Pixel.

Wenn die Breite auf 600px und die Höhe auf 1080px eingestellt ist, dann ist 1vmin = 6px, 1vmax = 10,8px.

Angenommen, Sie möchten, dass ein Element auf dem Bildschirm immer sichtbar ist:

.Kasten { 
    Höhe: 100vmin; 
    Breite: 100vmin;
} 

Angenommen, Sie möchten, dass dieses Element immer den gesamten sichtbaren Bereich des Ansichtsfensters ausfüllt:

.Kasten { 
    Höhe: 100vmax; 
    Breite: 100vmax;
}

Zusammenfassen

Em und rem sind die Einheiten, die wir in der tatsächlichen Produktion am häufigsten verwenden. Wir können sie in Verbindung mit Medienabfragen verwenden, um die Schriftgröße des Textkörpers zu ändern und ein responsives Design zu erreichen. Mit vh, vw, vmin und vmax können wir die responsive Größe ebenfalls problemlos steuern, aber die tatsächliche Steuerbarkeit ist möglicherweise nicht so gut wie bei ersteren. Lassen Sie es uns entsprechend unseren Geschäftsanforderungen üben!

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.