Jednotky CSSExplained

38 of 38 rows

Jednotka↕	Vztahuje se k↕	Kdy použít↕	Příklad↕
Absolutní
⤢px	1/96 palce (referenční pixel CSS).	Pevné rozměry UI: ohraničení, vlasové linky, rozměry ikon.	border: 1px solid #000;
⤢pt	1/72 palce (1pt = 1.333px).	Tiskové styly, kde se velikosti mapují na fyzický papír.	font-size: 12pt;
⤢cm	1 centimetr (≈37.8px).	Tisková rozvržení vyžadující reálné míry.	margin: 2cm;
⤢mm	1 milimetr (≈3.78px).	Jemné měřicí údaje pro tisk.	padding: 5mm;
⤢in	1 palec (96px = 2.54cm).	Tisková rozvržení měřená v palcích.	margin: 1in;
Relativní vzhledem k písmu
⤢em	Vlastní font-size prvku (zděděná od rodiče).	Odsazení, které roste spolu s okolním textem.	padding: 1em;
⤢rem	Font-size kořenového prvku (prvek html).	Velikosti písma: respektuje uživatelovo nastavení velikosti písma kořene.	font-size: 1.25rem;
⤢ch	Šířka znaku '0' v aktuálním písmu.	Nastavit čitelnou délku řádku (znaků na řádek).	max-width: 70ch;
⤢ex	Výška x aktuálního písma (výška minuskového 'x').	Svislé metriky svázané s písmem.	line-height: 2ex;
⤢cap	Výška verzálků aktuálního písma (výška verzálního písmene).	Svislé metriky podle verzálků, těsnější než ex.	padding-top: 0.5cap;
⤢ic	Šířka ideogramu '水' (voda) v aktuálním písmu.	Rozměry sledující jednu buňku znaku CJK.	width: 4ic;
⤢lh	Vlastní vypočtená line-height prvku.	Rozměrovat prvky v celých řádcích textu.	height: 3lh;
⤢rlh	Line-height kořenového prvku.	Odsazení v násobcích základní výšky řádku dokumentu.	margin-block: 2rlh;
Relativní vzhledem k viewportu
⤢%	Hodnota rodiče téže vlastnosti.	Fluidní rozvržení dimenzovaná podle nadřazeného prvku.	width: 50%;
⤢vw	1 % šířky viewportu.	Sekce přes celou šířku dimenzované podle šířky obrazovky.	width: 100vw;
⤢vh	1 % výšky viewportu.	Hero sekce nebo překryvy přes celou výšku obrazovky.	height: 100vh;
⤢vmin	1 % menšího rozměru viewportu.	Rozměrovat prvky tak, aby vešly na obrazovku v libovolné orientaci.	font-size: 5vmin;
⤢vmax	1 % většího rozměru viewportu.	Vyplnit dominantní osu viewportu.	font-size: 5vmax;
⤢svh	1 % malé výšky viewportu (rozhraní prohlížeče plně zobrazeno).	Mobilní sekce v plné výšce, které se vejdou nad rozbalené rozhraní prohlížeče.	height: 100svh;
⤢lvh	1 % velké výšky viewportu (rozhraní prohlížeče skryto).	Pozadí, která musí pokrýt obrazovku, i když se rozhraní prohlížeče zasune.	height: 100lvh;
⤢dvh	1 % dynamické výšky viewportu, sledující rozhraní prohlížeče při jeho zobrazování a skrývání.	Mobilní oprava 100vh: výška se mění, jak se rozhraní prohlížeče objevuje.	height: 100dvh;
⤢svw	1 % malé šířky viewportu.	Protějšek svh na šířku pro nejužší stav viewportu.	width: 100svw;
⤢lvw	1 % velké šířky viewportu.	Protějšek lvh na šířku pro nejširší stav viewportu.	width: 100lvw;
⤢dvw	1 % dynamické šířky viewportu, sledující rozhraní prohlížeče.	Protějšek dvh na šířku, když se viewport mění spolu s rozhraním.	width: 100dvw;
⤢vi	1 % velikosti viewportu podél řádkové osy (šířka v horizontálních směrech psaní).	Dimenzování podle viewportu, které sleduje směr psaní.	width: 50vi;
⤢vb	1 % velikosti viewportu podél blokové osy (výška v horizontálních směrech psaní).	Dimenzování podle viewportu, které zůstává správné ve vertikálních směrech psaní.	height: 50vb;
Fluidní
⤢clamp()	Upřednostňovaná hodnota omezená minimem a maximem.	Fluidní typografie, která nikdy nepřekročí spodní ani horní hranici.	width: clamp(320px, 80vw, 1100px);
⤢min()	Nejmenší z argumentů oddělených čárkami.	Uzda velikosti, aby nikdy nepřesáhla maximum.	width: min(100%, 600px);
⤢max()	Největší z argumentů oddělených čárkami.	Vynutit minimální velikost, která roste s viewportem.	width: max(50%, 300px);
Úhel
⤢deg	1/360 plného kruhu.	Transformace rotace a úhlové pozice přechodů.	transform: rotate(45deg);
⤢rad	Radiány; 1rad ≈ 57.2958deg.	Úhly vypočtené matematicky, například generované transformace.	transform: rotate(1.5708rad);
⤢grad	Gradiány; 400grad = plný kruh.	Starší nebo geodetické úhlové hodnoty.	transform: rotate(100grad);
⤢turn	1turn = jeden plný kruh 360°.	Celé a půlové otáčky čitelné jedním pohledem.	transform: rotate(0.5turn);
Čas
⤢s	Jedna sekunda.	Délky animací a přechodů.	transition: opacity 0.3s;
⤢ms	Jedna milisekunda (1s = 1000ms).	Krátké animace a zpoždění pro zpětnou vazbu UI.	animation-duration: 150ms;
Rozlišení
⤢dpi	Bodů na palec výstupu.	Media queries rozlišení zaměřené na tisk.	@media (min-resolution: 300dpi)
⤢dppx / x	Bodů na jednotku px; 1dppx odpovídá standardnímu displeji 96dpi.	Media queries pro retina a vysoké DPI.	@media (min-resolution: 2x)
⤢dpcm	Bodů na centimetr (1dppx ≈ 2.54dpcm).	Media queries rozlišení v metrických jednotkách.	@media (min-resolution: 118dpcm)