CSS Unit Guide: CSS em, rem, vh, vw og mere, forklaret

Enheder

Mange CSS egenskaber kan lide width, margin, padding, font-sizeosv tage længde. CSS har en måde at udtrykke længde i flere enheder. Længde er en kombination af et tal og enheden uden hvidt mellemrum. F.eks 5px. 0.9emOsv.

Længde

Fælles længde enheder

Der er flere enheder, der bruges af CSS til at udtrykke længde. De ældre, understøttet af alle browsere, er:

  • rem - “r” står for “root”: “root em” -, hvilket svarer til skriftstørrelsen, der er fastgjort til rodelementet (næsten altid).
  • vh og vw - Mange responsive webdesignteknikker er stærkt afhængige af procentvise regler. Imidlertid er CSS-procentmål ikke altid den bedste løsning på alle problemer. Mål vh er lig med 1/100 af visningsportens højde. Så hvis f.eks. Browserens højde er 800 px, svarer 1vh til 8 pixel, og hvis bredden på visningsområdet er 650 pixel, svarer 1vh til 6,5 pixel.
  • vmin og vmax - Disse enheder er relateret til den maksimale eller minimale værdi af vh og vw . For eksempel, hvis browseren var indstillet til 1200 pixel bred og højden 600 pixel, ville 1vmin være 6 pixel og 1 vmax ville være 12 pixel. Men hvis bredden blev indstillet til 700 pixel og højden sat til 1080 pixel, ville vmin være lig med 7 pixel og vmax 10,8 pixel.
  • ex og ch - Disse enheder svarer til em og rem afhænger af den aktuelle skrifttype og skriftstørrelse. Men i modsætning til em og rem er disse enheder også afhængige af,font-familyda de bestemmes baseret på specifikke mål for hver skrifttype. Den ch enhed ( ”karakter enhed”) er defineret som bredden af nultegnet ( ”0”). Den ex enhed defineres som ”de aktuelle x-højden af den aktuelle skrifttype eller halvdelen af 1em”. Højde-x for en given skrifttype er højden af ​​små bogstaver "x" for den pågældende skrifttype. Det er ofte det midterste mærke for skrifttypen.

Der er to generelle slags enheder, der bruges til længde og størrelse i CSS: relativ og absolut.

Relative enheder

Relative enheder skifter i forhold til elementets aktuelle skriftstørrelse eller andre indstillinger. Nogle relative enheder er

em

  • bredden på et stort bogstav M font-sizepå det aktuelle element.
  • Skriftstørrelser arves fra overordnede elementer.

Eksempel:

div { font-size: 16px; } div h3 { font-size: 2rem; }

Her er

vil være lig med, 32pxda det font-sizeaktuelle eller det overordnede element er 16px.

rem

  • rod emeller bredden på et stort bogstav M i standardbasen font-size.
  • Forældres skriftstørrelser har ingen effekt.

Eksempel:

body { font-size: 16px; } p { font-size: 1.5rem; }

Her er

vil være lig, 24pxda standardbasen font-sizeer 16px.

%

  • procentstørrelsen i forhold til en forældres størrelse.

Eksempel:

div { width: 400px; } div p { width: 75%; }

Da forældrenes bredde er 400px, ville bredden af ​​den indre pargraf være 300pxeller 75% af 400px.

vw

  • visningsbredde eller 1/100 af bredden af ​​visningen

Eksempel:

body { width: 100vw; }

Den bodyfylde bredden af viewporten, om dette er 417px, 690px, eller enhver bredde.

vh

  • sehøjde eller 1/100 af visningens højde

Eksempel:

div { height: 50vh; }

Dette divudfylder halvdelen af ​​visningen, uanset om det er 1080px, 1300px eller en hvilken som helst højde.

Absolutte enheder

Absolutte enheder vil være de samme uanset skærmstørrelse eller andre indstillinger. Nogle absolutte enheder er

px

  • pixel
  • pixeltællinger er i forhold til kvaliteten af ​​visningsenhedens skærm

in, cm,mm

  • tomme, centimeter, millimeter
  • En tomme er en tomme på en lille skærm eller en stor skærm

pt, pc

  • point (1/72 tomme) og picas (12 point)

Eksempel

p { font-size: 24px; } div { width: 3in; border-width: 3pt; }

Et afsnit med font-size: 24pxvises som 24 px på en telefon, tablet eller skrivebordsskærm.

Den divvises som 3 inches bred, og den borderpå divvil være 3/72 af en tomme tyk, uanset skærmstørrelse.