CSS3 jednotky

rem

Rozměr, který odpovídá hodnotě font-size na root elementu, tedy <html>. „root-emka“ jsou variantou známé jednotky em. Od běžných em se liší tím, že nevychází z velikosti fontu rodičovského elementu.

Velikost písma pro <html> element je v prohlížečích obvykle nastavená tak, aby odpovídala 16px.

Pokud všechny rozměry týkající se typografie (nebo klidně i layoutu) nastavíte v rem jednotkách, můžete si snadno zvětšit celý dokument pouhou změnou hodnoty ve vlastnosti html { font-size: … } a vytvářet tak elastické layouty.

Podobně jako v příkladu výše můžete změnu velikosti písma celého dokumentu a s ním i elastické zvětšení layoutu provést pomocí media query.

Příklad

Všechny rozměry v dokumentu nastavíme pomocí jednotky rem. Pokud tedy nadpisy první úrovně nastavíme na 1.5rem, budou velké 1,5 × 16px – tedy 24px.

h1 {
  font-size: 1.5rem;
}

Pokud se tedy pomocí media query rozhodneme, že od šířky okna 801 pixelů nastavíme základní velikost písma na 25 pixelů, …

@media (min-width: 801px) {
  html {
    font-size: 25px;
  }
}

… zvětší se nám všechny rozměry nastavené v jednotkách rem. Nadpis <h1> tedy bude mít v těchto šířkách okna velikost 38 pixelů (25px × 1,5).

Na živo můžete vyzkoušet tady: cdpn.io/e/mnbaA.

Podpora v prohlížečích

IE9+. Pro starší prohlížeče lze vytvořit pixelový fallback:

font-size: 24px;
font-size: 1.5rem;

Fallback je lepší nechat si generovat automaticky, například pomocí CSS preprocesoru.

Více o podpoře v prohlížečích: caniuse.com/rem.

Jednotky viewportu: vw, vh, vmin, vmax

Umožňují definovat rozměry v CSS relativně k velikosti viewportu, zjednodušeně řečeno výšce nebo šířce okna.

  • vw – zkratka pro „viewport width“ – 1vw označuje setinu šířky viewportu
  • vh – zkratka pro „viewport height“ – 1vh označuje setinu výšky viewportu
  • vmin – zkratka pro „viewport minimum“ – reprezentuje menší hodnotu z porovnání 1vw a 1vh
  • vmax – zkratka pro „viewport maximum“ – reprezentuje větší hodnotu z porovnání 1vw a 1vh

První příklad: roztažení elementu na celou výšku okna pomocí vh

Na rozdíl od procent se jednotky viewportu nevztahují k rozměrům nejbližšího rodiče, ale k šířce a výšce okna prohlížeče. Lze s nimi tedy dělat kouzla, která dříve byla možná jen pomocí CSS hacků nebo Javascriptu.

Příkladem budiž roztažení výšky layoutu stránky na celou výšku okna prohlížeče:

.container {
  height: 100vh;
}

Druhý příklad: elastická typografie s vw

S volkswageny můžete užitečné věci dělat v oblasti velikosti písma.

Nejjednodušší příklad vypadá takto:

h1 {
  font-size: 6vw;
}

Písmo se pak bude zvětšovat podle šířky okna. Zkuste si to sami:

Třetí příklad: velikost textu v hlavním nadpise stránky pomocí vmin

Jak vám možná došlo u vw typografie, nadpisy mohou být na malých displejích příliš malé a na velkých příliš velké. Když se nechcete trápit s Media Queries, zkuste vmin.

h1 {
  font-size: 6vmin;
}

Písmo se pak na malém displeji v režimu na výšku sází v procentech ze šířky. Na velkém monitoru zase v procentech z výšky. Ve spoustě situací se tak obejdete bez Media Queries.

Více zde: thenewcode.com/1137/MinMaxing-Understanding-vMin-and-vMax-in-CSS.

Podpora v prohlížečích

V posledních verzích umí všechny moderní prohlížeče kromě Opery Mini: caniuse.com/viewport-units.

Je to ovšem trochu složitější:

  • IE9 namísto vmin používá vm.
  • IE10 neumí vmax.
  • Safari na iOS6+7 má hned několik chyb souvisejících s jednotkami viewportu. Sledujte odkazy na caniuse.com/viewport-units.
  • IE8, Android Browser až do verze 4.3 a Opera Mini tyto jednotky neumí vůbec.

Poznámka: Ukázky kódu v článku obsahují pouze standardní syntaxi podle CSS3 norem. Ve některých případech je potřeba použít vendor prefix varianty. Na aktuální situaci se podívejte na shouldiprefix.com.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategoriích Responzivní design, CSS.

Tabulky v responzivním designu

31. 7. 2017 v příručce

Pojďme si představit všechny způsoby, jak lze s tabulkami v dnešním webdesignu zacházet, a vy si jistě vyberete.

Veřejná školení

Dnešní webová kodéřina

Dnešní webová kodéřina

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Příští termín: 27. září.

14. září Mistrovský vývoj webů na WordPressu
5. října Optimalizace rychlosti načítání
19. října SVG
16. listopadu Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Vydal jsem novou knihu: „Vzhůru do (responzivního) webdesignu“

„Vzhůru do (responzivního) webdesignu“

Kniha „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací