Jednotky

Pixely jsou pevné: 250 pixelů je 250 pixelů na telefonu i na velkém monitoru. Pro malé věci to nevadí, ale větší části stránky často potřebují velikost, která se přizpůsobí obrazovce. K tomu slouží další jednotky:

• % (procenta): podíl z velikosti rodiče. width: 50% znamená polovinu šířky rodiče. (U výšky height procenta fungují, jen když má rodič nastavenou výšku, proto se používají hlavně pro šířku.)
• vw a vh (z anglického viewport width a viewport height, šířka a výška okna): 1 % šířky nebo výšky okna prohlížeče. Prvek s height: 100vh je tedy vysoký jako celé okno. V našich cvičeních je oknem náhled.
• rem, jednotka, kterou znáte z minulé lekce: 1rem je základní velikost písma, obvykle 16 pixelů. Hodí se pro velikosti, které mají růst spolu s textem, například když si návštěvník v prohlížeči nastaví větší písmo.

Prvek section s textem je teď široký přes celou stránku. Na široké obrazovce jsou pak řádky textu velmi dlouhé a špatně se čtou. Zúžíme ho pomocí procent, aby se přizpůsobil jakékoli obrazovce.