Sådan oprettes: Responsiv tekst

Forrige side Liste uten punkter
Neste side Skyggetekst

Lær hvordan man bruger CSS til at oprette responsiv layout.

Hello World

Juster browserens vinduesstørrelse og se, hvordan skriftstørrelsen skalerer.

Responsiv skriftstørrelse

Tekststørrelse kan bruges vw Enhedsindstilling, som betyder "visningsområdets bredde".

Så vil tekstdygtelsen følge browserens vinduesstørrelse:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Juster browserens vinduesstørrelse og se, hvordan skriftstørrelsen skalerer.</p>

Prøv selv

Bemærk:Visningsområdet er browserens vinduesstørrelse.1vw = 1% af visningsområdets bredde. Hvis visningsområdet er 50 cm bredt, så 1vw 0,5 cm

Ændre skriftstørrelse med medieforespørgsel

Du kan også bruge medieforespørgsler til at ændre skriftstørrelsen på elementer ved specifikke skærmskalaer:

Fontstørrelse kan ændres

Se effekten

/* Hvis skærmens bredde er 601px eller større, sæt <div>'s font-size til 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Hvis skærmens bredde er 600px eller mindre, sæt <div>'s font-size til 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Prøv selv