Toto je 20. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Toto je 20. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
V dnešním díle seriálu se zaměříme na velikost písma při různých rozlešení. Každý asi někdy řešil to, že to co vypadá na velkém monitoru dobře, nevypadá hezky na mobilu.
Asi nejjednoduší a nejpoužívanější je zápis @media. Stanoví se body zlomu, kdy se má písmo přepnout na menší velikost. Viz. ukázka.
h1 {font-size: 36px;}h2 {font-size: 24px;}@media (max-width: 767px) {h1 {font-size: 24px;}h2 {font-size: 18px;}}@media (max-width: 320px) {h1 {font-size: 18px;}h2 {font-size: 14px;}}
<!DOCTYPE html><html lang="cs-CZ"><head><meta charset="utf-8"><title>Změna velikosti písma podle šířky stránky</title></head><body><h1>Nadpis první úrovně, který se mění s velikostí okna</h1><h2>Nadpis druhé úrovně, který se mění s velikostí okna</h2></body></html>
Další možností je viewport. Tato možnost přichází od IE 9. Není kompaktibilní se staršími verzemi Opery a starších Android prohližečích.
1vw se rovná jedné setině šířky viewportu. Je proto vhodné viewport kombinovat s @media kvůli velikostem. Následuje praktická ukázka.
h1 {font-size: 32px;}h2 {font-size: 24px;}/* Pouziti viewport */@media (min-width: 420px) and (max-width: 767px) {h1 {font-size: 3vw;}h2 {font-size: 2vw;}}/* Pevna velikost */@media (max-width: 420px) {h1 {font-size: 18px}h2 {font-size: 14px}}
<!DOCTYPE html><html lang="cs-CZ"><head><meta charset="utf-8"><title>Změna velikosti písma podle šířky stránky za pomocí viewportu</title></head><body><h1>Nadpis první úrovně, který se mění s velikostí okna</h1><h2>Nadpis druhé úrovně, který se mění s velikostí okna</h2></body></html>
Problém může nastat při pružném layoutu, protože velikost se počítá z viewportu, né z velikosti elementu. Řešení je opět @media.
