Od provozovatele projektu Rychlost.CZ
WebDev.wiki > Návody pro webmastery a vývojáře > Změna velikosti písma podle šířky stránky

Změna velikosti písma podle šířky stránky - Začínáme s HTML

vydáno: 27.07.2016, seriál: Začínáme s HTML | komentářů: 0

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.

 

Zápis @media

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.

Zobrazit ukázku
Ukázka:
CSS
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;}
}
Použité vlastnosti: font-size, max-width
HTML
<!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>
Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <h2>

Viewport

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.

 

Vysvětlení:

1vw se rovná jedné setině šířky viewportu. Je proto vhodné viewport kombinovat s @media kvůli velikostem. Následuje praktická ukázka.

Zobrazit ukázku
Ukázka:
CSS
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}
}
Použité vlastnosti: font-size, min-width, max-width
HTML
<!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>
Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <h2>

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.