Jednotky CSS
Jednotky CSS
CSS má několik různých jednotek pro vyjádření délky.
Mnoho vlastností CSS nabývá hodnot „délka“, jako jsou width, margin, padding,
font-sizeatd.
Délka je číslo následované jednotkou délky, například 10px,
2ematd.
Příklad
Nastavte různé hodnoty délky pomocí px (pixelů):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Poznámka: Mezi číslem a jednotkou se nemůže objevit mezera. Pokud je však hodnota
0, lze jednotku vynechat.
U některých vlastností CSS jsou povoleny záporné délky.
Existují dva typy jednotek délky: absolutní a relativní .
Absolutní délky
Jednotky absolutní délky jsou pevné a délka vyjádřená v kterékoli z nich se zobrazí jako přesně tato velikost.
Jednotky absolutní délky se nedoporučují pro použití na obrazovce, protože velikosti obrazovky se velmi liší. Lze je však použít, pokud je známo výstupní médium, například pro rozvržení tisku.
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* Pixely (px) jsou relativní vzhledem k zobrazovacímu zařízení. U zařízení s nízkým rozlišením je 1px jeden pixel zařízení (bod) displeje. U tiskáren a obrazovek s vysokým rozlišením 1px znamená více pixelů zařízení.
Relativní délky
Relativní jednotky délky určují délku vzhledem k jiné vlastnosti délky. Jednotky relativní délky se lépe škálují mezi různými vykreslovacími médii.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
Tip: Jednotky em a rem jsou praktické při vytváření dokonale škálovatelného rozložení!
* Viewport = velikost okna prohlížeče. Pokud je výřez široký 50 cm, 1vw = 0,5 cm.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje jednotku délky.
| Length Unit | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |