Průvodce pro CSS Viewport Jednotky vw, vh, vmin, vmax

Délka procento zobrazení, nebo zobrazovací jednotky jak jsou častěji uváděny, jsou citlivé jednotky CSS, které umožňují definovat rozměry jako procento šířky nebo délky výřezu. Jednotky Viewport mohou být velmi užitečné v případech, kdy jsou jiné citlivé jednotky CSS, například procenta těžko dělat práci.

Ačkoli Dokumentace W3C na jednotkách viewportu obsahuje vše, co lze teoreticky uvést, není to příliš stručné. Takže v tomto článku se podíváme na to, jak tyto CSS jednotky práce v praxi.

Výška výřezu (vh) & šířka pohledu (vw)

W3C definuje výřez tak jako “počáteční blok obsahující blok”. Jinými slovy, oblast je oblast zobrazení obsažené v okně prohlížeče nebo jakékoli jiné oblasti zobrazení na obrazovce.

vw a vh Jednotky znamená procento šířky a výšky skutečného výřezu. Mohou mít hodnotu mezi 0 a 100. \ t podle následujících pravidel:

 100vw = 100% šířky výřezu 1vw = 1% šířky výřezu 100vh = 100% výšky výřezu 1vh = 1% výšky výřezu 

Rozdíly v procentech

Jak se liší zobrazovací jednotky od procentních jednotek? Procentní jednotky velikost jejich rodičovského prvku zatímco jednotky zobrazení nejsou. Zobrazovací jednotky se vždy počítají jako procenta velikosti výřezu. V důsledku toho prvek definovaný jednotkami výřezu může překročit velikost svého nadřazeného prvku.

Příklad: Části na celé obrazovce

Části na celé obrazovce jsou pravděpodobně nejznámějšími případy použití zobrazovacích jednotek.

HTML je poměrně jednoduché; prostě máme tři části pod sebou a chceme, aby každý z nich pokrývají celou obrazovku (ale ne více).

V CSS používáme 100vh jako výška hodnotu a 100% tak jako šířka. Nepoužíváme vw jako výchozí, jsou také přidány posuvníky velikosti výřezu. Takže, kdybychom použili šířka: 100vw; pravidlo a horizontální posuvník se objeví na v dolní části okna prohlížeče.

 * margin: 0; výplň: 0;  sekce background-size: cover; Pozice pozadí: střed; šířka: 100%; výška: 100vh;  .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg'];  .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg'];  .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];  

Na ukázce gif níže můžete vidět vh je skutečně reagující jednotka.

Podle W3C dokumentů, výše uvedené horizontální posuvník problém lze vyřešit přidáním přetečení: auto; pravidlo kořenového prvku. Toto řešení funguje jen částečně, ačkoli. Horizontální posuvník skutečně zmizí, ale šířka je stále vypočtena na základě šířky pohledu (včetně postranního panelu), takže prvky budou o něco větší, než by měly být.

Řekl bych, že bych se neodvážil použít vw zapnuto dimenzování prvků na celé obrazovce z tohoto důvodu. Nepotřebujeme to ani jako šířka: 100%; pravidlo funguje dokonale. S rozložením na celou obrazovku byla skutečnou výzvou vždy to, jak nastavte správnou hodnotu výšky a vh jednotka pro to dává skvělé řešení.

Další případy použití

Pokud máte zájem jiné případy použití vw a vh Lullabot má skvělý článek, který uvádí seznam několik příkladů reálného života (s ukázkami Codepen), například:

• Karty s pevným poměrem.
• Udržování prvku kratšího než obrazovka.
• Změna velikosti textu.
• Vylomení kontejneru.

Opera.dev má také krátký návod, jak můžete využít pákový efekt vw jednotka v vytváření citlivé typografie.

Nelze použít pouze jednotky zobrazení šířka a výška vlastnosti, ale na jiné. Můžete například nastavte velikost výplní a okrajů za použití vw a vh jednotek.

Výřez min (vmin) a max. zobrazení (vmax)

vmin a vmax jednotky umožňují přístup k velikost menší nebo větší strany výřezu podle následujících pravidel:

 100vmin = 100vw nebo 100vh, podle toho, která hodnota je menší 1vmin = 1vw nebo 1vh, podle toho, která hodnota je menší 100vmax = 100vw nebo 100vh, podle toho, která hodnota je větší 1vmax = 1vw nebo 1vh, podle toho, která hodnota je větší 

Takže v případě a orientace na výšku, 100vmin je rovný 100vw, jako výřez menší než svisle. Ze stejného důvodu, 100 Vmax bude rovna 100vh.

Podobně v případě a orientace na šířku, 100vmin je rovný 100vh, jako výřez svisle než vodorovně. A samozřejmě, 100 Vmax bude rovna 100vw tady.

Příklad: Udělejte si na každé obrazovce čitelné texty

vmin a vmax jednotky jsou mnohem méně známé než vw a vh. Lze je však výborně použít jako nahrazení orientace @media dotazy. Například, vmin a vmax může přijít vhod, když máte prvky, které mohou vypadat podivně při různých poměrech stran.

Nový kód má skvělý návod, ve kterém diskutují, jak můžete udržet čitelný text hrdiny na každé obrazovce pomocí vmin jednotka. Hrdinové texty jsou náchylné k pohledu příliš malý na mobilních a příliš velkých na velkých monitorech.

Zde je hlavní myšlenka jejich řešení:

 h1 font-size: 20vmin; font-family: Avenir, sans-serif; hmotnost písma: 900; zarovnání textu: střed;  

V demoverzi Codepen se můžete podívat jak vmin řeší problém čitelnosti textů hrdinů. Přístup k “Úplná stránka” pohled na Codepen změnit velikost okna prohlížeče jak horizontálně, tak vertikálně, abyste viděli, jak se mění hrdina.

Podpora prohlížeče

Jak můžete vidět na grafu CanIUse níže, podpora prohlížeče je poměrně dobrá pro zobrazovací jednotky. Mějte však na paměti, že některé verze IE a Edge nepodporují vmax. Také iOS 6 a 7 mají problém s vh jednotka, který byl opraven v iOS 8.