Hur skapas: Responsiv text

Lär dig hur du använder CSS för att skapa responsiv layout.

Hej Världen

Justera storleken på webbläsarfönstret och se hur textstorleken skalas.

Se effekten

Responsiv textstorlek

Textstorlek kan justeras med vw Enhetsinställningar, som betyder "viewport bredd".

Så kommer textstorleken att följa storleken på webbläsarfönstret:

<h1 style="font-size:8vw;">Hej Världen</h1>
<p style="font-size:2vw;">Justera storleken på webbläsarfönstret och se hur textstorleken skalas.</p>

Prova själv

Kommentar:viewport är storleken på webbläsarens fönster.1vw = 1% av viewportens bredd. Om viewportens bredd är 50 centimeter, då 1vw För 0.5 centimeter.

Ändra textstorlek med media query

Du kan också använda media queries för att ändra elementets textstorlek vid specifika skärmstorlekar:

Ändra textstorlek dynamiskt.

Se effekten

/* Om skärmens bredd är 601px eller större, sätt <div> font-size till 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Om skärmens bredd är 600px eller mindre, sätt <div> font-size till 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Prova själv

Relaterade sidor

Tutorials:CSS-teckensnitt

Tutorials:CSS-mediafråga