Miten luodaan: Responsiivinen teksti

Edellinen sivu Luettelo ilman项目符号
Seuraava sivu Vinkkiteksti

Opit, miten CSS:llä luodaan responsiivista typografista.

Hello World

Muuta selaimen ikkunan kokoa, katso kuinka fonttikoko skaalautuu.

Responsiivinen fonttikoko

Tekstin koko voidaan vw Yksikköasetus, joka tarkoittaa "näkymän leveys".

Näin tekstin koko seuraa selaimen ikkunan kokoa:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Muuta selaimen ikkunan kokoa, katso kuinka fonttikoko skaalautuu.</p>

Kokeile itse

Huomautus:Näyttökoko on selaimen ikkunan koko.1vw = näyttökoon 1 %, jos näyttökoko on 50 senttimetrin mittaan, niin 1vw 0,5 senttimetrin mittaan.

Muuta fonttikokoa media-kyselyllä

Voit käyttää media-kyselyjä muokata elementin fonttikokoa tietyn näyttökokoon.

Fonttikoko on muutettavissa.

Tarkista vaikutus

/* Jos näyttöleveys on 601px tai suurempi, aseta <div>:n font-size 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Jos näyttöleveys on 600px tai pienempi, aseta <div>:n font-size 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Kokeile itse