Wie wird erstellt: Responsiver Text

Lernen Sie, wie Sie mit CSS responsive Layouts erstellen.

Hallo Welt

Passen Sie die Größe des Browserfensters an und sehen Sie, wie sich die Zeichengröße verändert.</p>

Effekt anzeigen

Responsiver Zeichengröße

Die Zeichengröße kann mit vw Einheitseinstellungen, was "Viewport-Breite" bedeutet.

Dadurch ändert sich die Textgröße mit der Größe des Browserfensters:

<h1 style="font-size:8vw;">Hallo Welt</h1>
<p style="font-size:2vw;">Passen Sie die Größe des Browserfensters an und sehen Sie, wie sich die Zeichengröße verändert.</p>

Try it yourself

Anmerkung:der Viewport ist die Größe des Browserfensters.1vw = 1% der Viewport-Breite. Wenn der Viewport 50 cm breit ist, dann 1vw 0,5 cm.

Zeichengröße mit Media Queries ändern

Sie können auch Media Queries verwenden, um die Zeichengröße von Elementen für bestimmte Bildschirmgrößen zu ändern:

Veränderbare Zeichengröße.

Effekt anzeigen

/* Wenn die Bildschirmbreite 601px oder größer ist, stellen Sie die font-size des <div> auf 80px ein */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Wenn die Bildschirmbreite 600px oder kleiner ist, stellen Sie die font-size des <div> auf 30px ein */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Try it yourself

Related pages

Tutorial:CSS font

Tutorial:CSS media query