Jak na to – responzivní text
Naučte se vytvářet responzivní typografii pomocí CSS.
Ahoj světe
Změňte velikost okna prohlížeče, abyste viděli, jak se velikost písma mění.
Responzivní velikost písma
Velikost textu lze nastavit pomocí vw
jednotky, což znamená "šířku výřezu".
Tímto způsobem bude velikost textu odpovídat velikosti okna prohlížeče:
Příklad
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
Viewport je velikost okna prohlížeče. 1vw = 1 % šířky výřezu. Pokud je výřez široký 50 cm, 1vw je 0,5 cm.
Změňte velikost písma pomocí mediálních dotazů
Můžete také použít dotazy na média ke změně velikosti písma prvku na konkrétní velikosti obrazovky:
Variabilní velikost písma.
Příklad
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Tip: Další informace o písmech naleznete v našem výukovém programu pro písma CSS .
Chcete-li se dozvědět více o mediálních dotazech, přečtěte si náš výukový program CSS Media Queries .