Flexible Schriftgröße eingrenzen

max(6vw, 30px) = mind. 30px Schriftgröße, sonst 6vw

Der Text wird nie kleiner als 30px, kann aber beliebig groß werden

min(6vw, 200px) = max. 200px Schriftgröße, sonst 6vw

Der Text wird nie größer als 200px, kann aber beliebig klein werden

clamp(30px, 6vw, 60px) = mind. 30px Schriftgröße, max. 60px Schriftgröße, sonst 6vw

Der Text wird nie kleiner als 30px, nie größer als 60px und passt sich dazwischen an die Browserfenster-Breite an. „Clamp“ ist aus meiner Sicht die beste Lösung!

Platzhalterbild!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe fugit consequatur perferendis debitis animi non? Nam numquam ipsam unde sequi sint neque, veritatis aperiam vero labore, quos magnam, officia maiores.

width: clamp(200px, 30vw, 500px); Das Bild wird nicht kleiner als 200px und nicht größer als 500px; dazwischen passt es sich der Browerfenster-Breite an…

Alle oben aufgeführten Anweisungen könnt Ihr natürlich auch auf andere Elemente (wie z.B. Bilder) anwenden! 

.max {
  font-size: max(6vw, 30px);
}

.min {
  font-size: min(6vw, 30px);
}

.clamp {
  font-size: clamp(30px, 6vw, 60px);
}

.bild img {
  float: left;
  margin-right: 1rem;
  width: clamp(200px, 30vw, 500px);
}