Jak to zrobić — tekst responsywny
Dowiedz się, jak tworzyć responsywną typografię za pomocą CSS.
Witaj świecie
Zmień rozmiar okna przeglądarki, aby zobaczyć, jak skaluje się rozmiar czcionki.
Responsywny rozmiar czcionki
Rozmiar tekstu można ustawić za pomocą vw
jednostki, co oznacza „szerokość rzutni”.
W ten sposób rozmiar tekstu będzie zgodny z rozmiarem okna przeglądarki:
Przykład
<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>
Rzutnia to rozmiar okna przeglądarki. 1vw = 1% szerokości widocznego obszaru. Jeśli wizjer ma szerokość 50 cm, 1vw ma 0,5 cm.
Zmień rozmiar czcionki za pomocą zapytań o media
Możesz również użyć zapytań o media, aby zmienić rozmiar czcionki elementu na określonych rozmiarach ekranu:
Zmienny rozmiar czcionki.
Przykład
/* 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;
}
}
Wskazówka: przejdź do naszego samouczka dotyczącego czcionek CSS , aby dowiedzieć się więcej o czcionkach.
Aby dowiedzieć się więcej o zapytaniach o media, przeczytaj nasz samouczek CSS Media Query .