CSS => Längeneinheiten

Einführung

Eine CSS-Abstandsmessung ist eine Zahl, der unmittelbar eine Längeneinheit folgt (px, em, pc, in,…)

CSS unterstützt eine Reihe von Längenmaßeinheiten. Sie sind absolut oder relativ.

Syntax

Werteinheit
1em

Parameter

Einheit	Beschreibung
%	Definieren Sie Größen in Bezug auf übergeordnete Objekte oder aktuelle Objekte abhängig von der Eigenschaft
em	Relativ zur Schriftgröße des Elements (2em bedeutet 2-fache Größe der aktuellen Schrift)
rem	Relativ zur Schriftgröße des Wurzelelements
vw	Relativ zu 1% der Breite des Ansichtsfensters *
vh	Relativ zu 1% der Höhe des Darstellungsbereichs *
vmin	Relativ zu 1% der kleineren Dimension * des Ansichtsfensters
vmax	Relativ zu 1% der * größeren Abmessung des Ansichtsfensters
cm	Zentimeter
mm	Millimeter
im	Zoll (1 Zoll = 96px = 2,54 cm)
px	Pixel (1px = 1 / 96stel von 1 Zoll)
pt	Punkte (1 Punkt = 1/72 von 1 Zoll)
Stck	picas (1pc = 12 pt)
s	Sekunden (für Animationen und Übergänge)
Frau	Millisekunden (für Animationen und Übergänge)
Ex	Relativ zur x-Höhe der aktuellen Schrift
CH	Basierend auf der Breite des Nullzeichens (0)
fr	gebrochene Einheit (für CSS-Rasterlayout verwendet)

Bemerkungen

Zwischen der Nummer und der Einheit darf kein Leerzeichen angezeigt werden. Wenn der Wert jedoch 0 ist, kann die Einheit weggelassen werden.
Für einige CSS-Eigenschaften sind negative Längen zulässig.

Schriftgröße mit rem

CSS3 führt einige neue Units ein, einschließlich der rem Unit, die für "root em" steht. Schauen wir uns an, wie rem funktioniert.

Betrachten wir zunächst die Unterschiede zwischen em und rem .

em : Relativ zur Schriftgröße des übergeordneten Elements. Dies verursacht das Compoundierungsproblem
rem : Relativ zur Schriftgröße des Root- oder <html> -Elements. Das heißt, es ist möglich, eine einzige Schriftgröße für das HTML-Element zu definieren und alle rem Einheiten als Prozentsatz davon festzulegen.

Das Hauptproblem bei der Verwendung von rem für die Schriftgröße besteht darin, dass die Werte etwas schwer zu verwenden sind. Hier ein Beispiel für einige gängige Schriftgrößen, die in rem Einheiten ausgedrückt werden, wobei die Basisgröße 16px ist:

10px = 0,625rem
12px = 0,75rem
14px = 0,875rem
16px = 1rem (Basis)
18px = 1,125rem
20px = 1,25rem
24px = 1,5rem
30px = 1,875rem
32px = 2rem

CODE:

html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}

Skalierbare Elemente mit rems und ems erstellen

Sie können rem durch die font-size Ihres html Tags definieren, um Elemente zu formatieren, indem Sie deren font-size auf rem und mit em innerhalb des Elements Elemente erstellen, die mit Ihrer globalen font-size skalieren.

HTML:

<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

Relevantes CSS:

html {
  font-size: 16px;
}

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;
}

input[type="range"] {
  font-size: 1rem;
  width: 10em;
}

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;
}

Mögliches Ergebnis:

vh und vw

CSS3 führte zwei Einheiten zur Darstellung der Größe ein.

vh , was für viewport height ist relativ zu 1% der Viewport-Höhe
vw , was für die viewport width vw steht, ist relativ zu 1% der Breite des Darstellungsbereichs

div { 
  width: 20vw; 
  height: 20vh;
}

Die Größe des div nimmt oben 20% der Breite und Höhe des Viewports ein

vmin und vmax

vmin : Relativ zu 1 Prozent der kleineren Dimension des Ansichtsfensters
vmax : Relativ zu 1 Prozent der größeren Dimension des Ansichtsfensters

Mit anderen Worten ist 1 vmin gleich dem kleineren von 1 vh und 1 vw

1 vmax ist gleich der größere von 1 vh und 1 vw

Hinweis : vmax wird nicht unterstützt in:

beliebige Version von Internet Explorer
Safari vor Version 6.1

mit Prozent%

Eine nützliche Einheit beim Erstellen einer responsiven Anwendung.

Seine Größe hängt vom übergeordneten Container ab.

Gleichung:

(Breite des übergeordneten Containers) * (Prozentsatz (%)) = Ausgabe

Zum Beispiel:

Elternteil hat 100px Breite , während das Kind 50% aufweist.

Bei der Ausgabe beträgt die Breite des Kindes die Hälfte (50%) der des Elternteils , was 50 Pixel beträgt.

HTML

<div class="parent">
   PARENT
   <div class="child">
     CHILD
   </div>
</div>

CSS

<style>

*{
  color: #CCC;
}

.parent{
  background-color: blue;
  width: 100px;
}

.child{
  background-color: green;
  width: 50%;
}

</style>

AUSGABE

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

CSS
Längeneinheiten

Suche…