Jak tworzyć: responsywny tekst

Naucz się, jak używać CSS do tworzenia responsywnego układu.

Hello World

Zmniejsz rozmiar okna przeglądarki, aby zobaczyć, jak zmienia się wielkość czcionki.

Zobacz efekt

Responsywna wielkość czcionki

Wielkość tekstu można vw Ustawienie jednostki, które oznacza "szerokość viewport".

W ten sposób, wielkość tekstu będzie się dostosowywać do rozmiaru okna przeglądarki:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Zmniejsz rozmiar okna przeglądarki, aby zobaczyć, jak zmienia się wielkość czcionki.</p>

Spróbuj sam

Uwaga:Viewport to rozmiar okna przeglądarki.1vw = 1% szerokości viewport. Jeśli szerokość viewport wynosi 50 cm, to 1vw Na 0,5 cm.

Zmiana wielkości czcionki za pomocą zapytań media

Możesz również użyć zapytań media, aby zmienić wielkość czcionki elementów dla konkretnych rozmiarów ekranu:

Zmienialna wielkość czcionki.

Zobacz efekt

/* Jeśli szerokość ekranu wynosi 601px lub więcej, ustaw font-size dla <div> na 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Jeśli szerokość ekranu wynosi 600px lub mniej, ustaw font-size dla <div> na 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Spróbuj sam

Strony związane

Tutorial:CSS czcionki

Tutorial:CSS media query