Flexbox a responzivní vzory

Fluidní typografie

Nadpis, který má být na telefonu menší a na velkém monitoru výrazný, se dá napsat dvěma media queries a třemi velikostmi. Nebo jedinou funkcí, která mezi krajními hodnotami plynule přechází.

.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Funkce clamp() bere tři hodnoty: dolní mez, prostřední hodnotu a horní mez. Prostřední rozhoduje o velikosti, dokud se drží mezi krajními – jakmile z nich vyjede, převezme to nejbližší mez.

V úzkém okně by 4vw vyšly na pár pixelů, takže velikost drží dolní mez. Uprostřed písmo plynule roste s oknem. Na velkém monitoru by 4vw nadpis roztáhly přes celou obrazovku, a tak ho zastaví horní mez.

Prostřední hodnota s rozumem

Samotné vw má jednu vadu: nemá ponětí o tom, jak velké písmo si uživatel v prohlížeči nastavil. Spraví se to tím, že se do prostřední hodnoty přimíchá rem:

.title {
  /* 1rem drží spodní hranu, 2vw přidává s šířkou okna */
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

Sčítat se uvnitř clamp() dá rovnou, žádné calc() k tomu není potřeba.

Nejen písmo

clamp() se netýká jen textu. Stejně dobře drží v mezích šířku obsahu nebo vnitřní odsazení stránky:

.page {
  width: clamp(20rem, 90%, 70rem);
  padding: clamp(1rem, 4vw, 3rem);
}

Tenhle jediný řádek nahradí dvě media queries a stránka díky němu nemá skokové předěly, ve kterých se rozvržení „lekne“.