CSS => Lengte-eenheden

Invoering

Een CSS-afstandsmeting is een getal onmiddellijk gevolgd door een lengte-eenheid (px, em, pc, in, ...)

CSS ondersteunt een aantal eenheden voor lengtemeting. Ze zijn absoluut of relatief.

Syntaxis

waarde- eenheid
1em

parameters

Eenheid	Beschrijving
%	Definieer de afmetingen in termen van bovenliggende objecten of huidig object afhankelijk van eigenschap
em	Ten opzichte van de lettergrootte van het element (2em betekent 2 keer de grootte van het huidige lettertype)
rem	Ten opzichte van de lettergrootte van het root-element
vw	Ten opzichte van 1% van de breedte van de viewport *
vh	Ten opzichte van 1% van de hoogte van de viewport *
Vmin	Ten opzichte van 1% van de * kleinere dimensie van viewport
vmax	Ten opzichte van 1% van de grotere dimensie van viewport *
cm	centimeters
mm	millimeters
in	inches (1in = 96px = 2.54cm)
px	pixels (1 px = 1/96 van 1 inch)
pt	punten (1pt = 1/72 van 1in)
pc	Picas (1 stuk = 12 pt)
s	seconden (gebruikt voor animaties en overgangen)
Mevrouw	milliseconden (gebruikt voor animaties en overgangen)
ex	Ten opzichte van de x-hoogte van het huidige lettertype
ch	Gebaseerd op de breedte van het nul (0) teken
fr	fractionele eenheid (gebruikt voor CSS Grid Layout)

Opmerkingen

Er kan geen witruimte tussen het nummer en het apparaat verschijnen. Als de waarde echter 0 is, kan de eenheid worden weggelaten.
Voor sommige CSS-eigenschappen zijn negatieve lengtes toegestaan.

Lettergrootte met rem

CSS3 introduceert een paar nieuwe eenheden, waaronder de rem eenheid, wat staat voor "root em". Laten we eens kijken hoe rem werkt.

Laten we eerst eens kijken naar de verschillen tussen em en rem .

em : relatief ten opzichte van de lettergrootte van de ouder. Dit veroorzaakt het probleem met de samenstelling
rem : gerelateerd aan de lettergrootte van het root- of <html> -element. Dit betekent dat het mogelijk is om een enkele lettergrootte voor het html-element te declareren en alle rem eenheden als percentage daarvan te definiëren.

Het belangrijkste probleem met het gebruik van rem voor lettergrootte is dat de waarden enigszins moeilijk te gebruiken zijn. Hier is een voorbeeld van enkele veel voorkomende lettergroottes uitgedrukt in rem eenheden, ervan uitgaande dat de basisgrootte 16 px is:

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

CODE:

html { 
  font-size: 16px; 
}

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

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

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

Schaalbare elementen maken met behulp van rems en ems

U kunt rem gedefinieerd door de font-size van uw html tag om elementen te stijlen door hun font-size te stellen op een waarde van rem en em binnen het element gebruiken om elementen te maken die schalen met uw globale font-size .

HTML:

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

Relevante 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;
}

Mogelijk resultaat:

vh en vw

CSS3 introduceerde twee eenheden voor het weergeven van de grootte.

vh , wat staat voor viewport height is relatief ten opzichte van 1% van de viewport hoogte
vw , wat staat voor viewport width is relatief ten opzichte van 1% van de viewport-breedte

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

Hierboven neemt de grootte voor de div 20% van de breedte en hoogte van de viewport in beslag

vmin en vmax

vmin : ten opzichte van 1 procent van de kleinere dimensie van de viewport
vmax : ten opzichte van 1 procent van de grotere dimensie van de viewport

Met andere woorden, 1 vmin is gelijk aan de kleinste van 1 vh en 1 vw

1 vmax is gelijk aan de grootste van 1 vh en 1 vw

Opmerking : vmax wordt niet ondersteund in:

elke versie van Internet Explorer
Safari vóór versie 6.1

procent gebruiken

Een van de handige eenheden bij het maken van een responsieve applicatie.

De grootte is afhankelijk van de oudercontainer.

Vergelijking:

(Breedte van bovenliggende container) * (Percentage (%)) = Output

Bijvoorbeeld:

Ouder heeft 100 px breedte terwijl het kind 50% heeft .

Op de uitvoer is de breedte van het kind de helft (50%) van de ouder , dat is 50 px .

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>

OUTPUT

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

CSS
Lengte-eenheden

Zoeken…