Sprievodca jednotkami CSS: Vysvetlivky CSS em, rem, vh, vw a ďalšie

Jednotky

Mnoho CSS vlastnosti radi width, margin, padding, font-sizeatď. Trvať dĺžku. CSS má spôsob, ako vyjadriť dĺžku vo viacerých jednotkách. Dĺžka je kombináciou čísla a jednotky bez medzier. Napr 5px, 0.9ematď.

Dĺžka

Jednotky bežnej dĺžky

Existuje niekoľko jednotiek, ktoré používajú CSS na vyjadrenie dĺžky. Tie staršie, podporované všetkými prehľadávačmi, sú:

  • rem - „r“ je skratka pre „root“: „root em“ -, ktorá sa rovná veľkosti písma fixovanej na koreňový prvok (takmer vždy).
  • vh a vw - Mnoho techník reagujúcich na návrh webu sa veľmi spolieha na percentuálne pravidlá. Avšak percentuálne miery CSS nie sú vždy najlepším riešením pre všetky problémy. Miesto vh sa rovná 1/100 výšky výrezu. Napríklad ak je výška prehliadača 800 pixelov, 1vh sa rovná 8px a podobne, ak je šírka výrezu 650px, 1vw zodpovedá 6,5px.
  • vmin a vmax - Tieto jednotky súvisia s maximálnou alebo minimálnou hodnotou vh a vw . Napríklad ak by bol prehliadač nastavený na šírku 1 200 pixelov a výšku 600 pixlov, hodnota 1vmin by bola 6px a 1vmax bola 12px. Keby však bola šírka nastavená na 700px a výška na 1080px, vmin by sa rovnal 7px a vmax 10,8px.
  • ex a ch - Tieto jednotky, podobne ako em a rem , sa spoliehajú na aktuálne písmo a veľkosť písma. Avšak, na rozdiel em a vecná , tieto jednotky tiež spoliehajú nafont-familytak, ako sú stanovené na základe osobitných opatrení pre každé písmo. Jednotka ch („znaková jednotka“) je definovaná ako šírka nulového znaku („0“). Jednotka ex je definovaná ako „aktuálna výška x aktuálneho písma alebo polovica 1emu“. Výška-x daného písma je výška malého „x“ tohto písma. Často je to stredná značka písma.

Pre dĺžku a veľkosť v CSS sa používajú dva všeobecné druhy jednotiek: relatívne a absolútne.

Relatívne jednotky

Relatívne jednotky sa menia vzhľadom na aktuálnu veľkosť písma prvku alebo iné nastavenia. Niektoré relatívne jednotky sú

em

  • šírka veľkého písmena M font-sizeaktuálneho prvku.
  • Veľkosti písma sa dedia z nadradených prvkov.

Príklad:

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

Tu

sa bude rovnať, 32pxpretože font-sizeaktuálny alebo nadradený prvok je 16px.

rem

  • koreň emalebo šírka veľkého písmena M predvoleného základu font-size.
  • Veľkosti nadradeného písma nebudú mať žiadny vplyv.

Príklad:

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

Tu

sa bude rovnať, 24pxpretože predvolený základ font-sizeje 16px.

%

  • percentuálna veľkosť vzhľadom na veľkosť rodiča.

Príklad:

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

Pretože šírka rodiča je 400px, šírka vnútorného pargrafu by bola 300px, alebo 75% 400px.

vw

  • šírka pohľadu alebo 1/100 šírky výrezu

Príklad:

body { width: 100vw; }

bodyFill šírka výrezu, či to tak je 417px, 690px, alebo akékoľvek šírky.

vh

  • výška výhľadu alebo 1/100 výšky výrezu

Príklad:

div { height: 50vh; }

To divvyplní polovicu výšky výrezu, či to tak je 1080px, 1300px, alebo akejkoľvek výšky.

Absolútne jednotky

Absolútne jednotky budú rovnaké bez ohľadu na veľkosť obrazovky alebo iné nastavenia. Niektoré absolútne jednotky sú

px

  • pixel
  • počet pixelov je relatívny k kvalite obrazovky zobrazovacieho zariadenia

in, cm,mm

  • palec, centimeter, milimeter
  • Palec je palec na malej alebo veľkej obrazovke

pt, pc

  • body (1/72 palca) a picas (12 bodov)

Príklad

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

Odsek s font-size: 24pxsa na obrazovke telefónu, tabletu alebo pracovnej plochy zobrazí ako 24 pixelov.

Značka divwill will show as 3 inches wide, and the borderon divwill be 3/72 of inch palec, bez ohľadu na veľkosť obrazovky.