CSS délkové jednotky
Absolutní
Absolutní jednotky jsou pevně dané.
Jsou vhodné jako jednotky použité pro výstupy pokud je známo výstupní medium (tisk,..)
U monitorů jsou absolutní jednotky spíše na závadu(přepočet dle monitoru).
☰ open
VSC + HTML + CSS
cm centimetr
mm milimetr
in palec (jeden palec=2,54cm) v CSS definováno: 1in=96px=2,54cm.
px pixel (jeden pixel se rovná 1/96 z palce)
Poznámka: Pixely (px) jsou relativní vůči zobrazovacímu zařízení. U zařízení s nízkým DPI je 1px(jedna tečka) dipleje. Pro tiskárny a vysoké rozlišení 1px znamená více bod v zařízení.
pt bod (1pt=1/72 z 1in)
pc picas (1pc=12pt)
Relativní délky
em velikost v poměru k velikosti písma nastaveném v rodičovském elementu.Pokud je v BODY nataveno font-size:16px pak je 1em=16px.
ex relativní vzhledem k výšce použitého písma
ch relativní k šířce '0' (nula).
rem relativní k výšce písma kořenového elementu
vw relativní šířka 1% z šířky viewportu (šířky monitoru)
vh relativní výška 1% z výšky viewportu (výška monitoru)
vmin relativní 1% z výšky nebo šířky dle viewportu (co je menší)
vmax relativní 1% z výšky nebo šířky dle viewportu (co je větší)
% relativní v poměru děleného na sto dílků
Poznámka: wmin a wmaxjsou skvělé pro responsivní design, protože se přizpůsobuje velikosti okna.
Ukázka rozdílu vmax a vmin
Ukázka rozdílu vmax a vminSrovnání jednotek
Pozicování
veličin vw a vh se dá velice dobře použít při pozicování a změně velikosti písma s ohledem na velikost monitoru.
h1 {
font-size: 12vw;
position:relative;
top:5vw;
left:5vh;
}
HTML kousky
width:calc()
Menu
Barvy u zátržítek a boxů
Accordion
Hodiny
Single page
Pricing card
Fluid Layout with Flex
CSS délkové jednotky
Absolutní
Absolutní jednotky jsou pevně dané.
Jsou vhodné jako jednotky použité pro výstupy pokud je známo výstupní medium (tisk,..)
U monitorů jsou absolutní jednotky spíše na závadu(přepočet dle monitoru).
cm centimetr
mm milimetr
in palec (jeden palec=2,54cm) v CSS definováno: 1in=96px=2,54cm.
px pixel (jeden pixel se rovná 1/96 z palce)
Poznámka: Pixely (px) jsou relativní vůči zobrazovacímu zařízení. U zařízení s nízkým DPI je 1px(jedna tečka) dipleje. Pro tiskárny a vysoké rozlišení 1px znamená více bod v zařízení.
pt bod (1pt=1/72 z 1in)
pc picas (1pc=12pt)
Relativní délky
em velikost v poměru k velikosti písma nastaveném v rodičovském elementu.Pokud je v BODY nataveno font-size:16px pak je 1em=16px.
ex relativní vzhledem k výšce použitého písma
ch relativní k šířce '0' (nula).
rem relativní k výšce písma kořenového elementu
vw relativní šířka 1% z šířky viewportu (šířky monitoru)
vh relativní výška 1% z výšky viewportu (výška monitoru)
vmin relativní 1% z výšky nebo šířky dle viewportu (co je menší)
vmax relativní 1% z výšky nebo šířky dle viewportu (co je větší)
% relativní v poměru děleného na sto dílků
Poznámka: wmin a wmaxjsou skvělé pro responsivní design, protože se přizpůsobuje velikosti okna.
Ukázka rozdílu vmax a vmin
Ukázka rozdílu vmax a vminSrovnání jednotek
Pozicování
veličin vw a vh se dá velice dobře použít při pozicování a změně velikosti písma s ohledem na velikost monitoru.
h1 {
font-size: 12vw;
position:relative;
top:5vw;
left:5vh;
}