Sprievodca jednotkami výstupu CSS vw, vh, vmin, vmax

Dĺžka výrezu v percentách, alebo zobrazovacích jednotiek ako sú často nazývané, sú citlivé jednotky CSS, ktoré vám umožňujú definovať dimenzie ako percento zo šírky alebo dĺžky výrezu. Výstavné jednotky môžu byť celkom užitočné v prípadoch, keď sú iné citlivé jednotky CSS, napríklad percentá ťažké robiť prácu.

Hoci Dokumentácia W3C na zobrazovacích jednotkách obsahuje všetko, čo môže byť uvedené do teórie, nie je to dosť verbózne. Takže v tomto článku sa pozrieme na to, ako tieto jednotky CSS pracovať v praxi.

Výška výrezu (vh) a šírka výhľadu (vw)

W3C definuje výrez ako “veľkosť počiatočného bloku”. Inými slovami, výrez je oblasť v okne prehliadača alebo inú zobrazovaciu plochu na obrazovke.

vw a vh Jednotky stojace za percento šírky a výšky skutočného výrezu. Môžu mať hodnotu medzi 0 a 100 podľa nasledujúcich pravidiel:

 100vw = 100% šírky výrezu 1vw = 1% šírky pohľadu 100vh = 100% výšky výrezu 1vh = 1% výšky výrezu 

Rozdiely v percentuálnych jednotkách

Takže, ako sa zobrazovacie jednotky líšia od percentuálnych jednotiek? Percento jednotiek zdedia veľkosť ich rodičovského prvku zatiaľ čo zobrazovacie jednotky nemajú. Jednotky výrezu sú vždy vypočítané ako percento veľkosti výrezu. V dôsledku toho môže prvok definovaný zobrazovacími jednotkami prekročiť veľkosť jeho rodičov.

Príklad: Úseky s plnou obrazovkou

Úseky s plnou obrazovkou sú pravdepodobne najznámejšie prípady použitia zobrazovacích jednotiek.

HTML je veľmi jednoduché; len to máme tri úseky pod sebou a chceme, aby každý z nich pokryť celú obrazovku (ale nie viac).

V CSS používame 100vh ako výška hodnota a 100% ako šírka. Nepoužívame vw jednotky tu ako predvolené, sú tiež pridané posúvacie panely do veľkosti výrezu. Takže ak sme použili šírka: 100vw; pravidlo a horizontálna posuvná lišta by sa objavil na spodnej časti okna prehliadača.

 * margin: 0; polstrovanie: 0;  sekcia background-size: cover; pozadie pozadia: centrum; šírka: 100%; výška: 100vh; . sekcia-1 pozadie-obrázok: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg'); . sekcia-2 pozadie-obrázok: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 pozadie-obrázok: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

Na demonštrácii gif nižšie to vidíte vh je naozaj citlivá jednotka.

Podľa dokumentov W3C je to uvedené horizontálna posuvná lišta možno vyriešiť pridaním pretečenie: auto; pravidlo na koreňový prvok. Toto riešenie funguje len čiastočne, hoci. Horizontálna posuvná lišta skutočne zmizne, ale šírka je stále vypočítané na základe šírky zobrazenia (vrátane postrannej lišty), takže prvky budú o niečo väčšie, ako by mali byť.

Povedal by som, neodvážil by som ho použiť vw jednotka zapnutá dimenzovanie prvkov na celú obrazovku z tohto dôvodu. Nepotrebujeme to ani ako šírka: 100%; pravidlo funguje dokonale. Pri celoplošných rozloženiach bola skutočná výzva vždy taká nastavte správnu výškovú hodnotu a vh jednotka dáva vynikajúce riešenie pre to.

Iné prípady použitia

Ak máte záujem iné prípady použitia vw a vh Lullabot má skvelý článok, ktorý uvádza a niekoľko príkladov z reálneho života (s Codepen demos), ako napríklad:

• Karty s pevným pomerom.
• Udržiavanie prvku kratšie ako obrazovka.
• Zmäkčenie textu.
• Odstránenie kontajnera.

Opera.dev má tiež krátky návod, ako môžete využiť pákový efekt vw jednotka v vytváranie citlivej typografie.

Nie je možné používať iba jednotky zobrazenia na šírka a výška vlastnosti, ale na inom. Napríklad, môžete nastavte veľkosť paddings a okrajov pomocou vw a vh aj jednotky.

Výhľad min (Vmin) & max. výrez (vmax)

Vmin a vmax Jednotky umožňujú prístup k súboru veľkosť menšej alebo väčšej strany výhľadu podľa nasledujúcich pravidiel:

 100vw = 100vw alebo 100vh, podľa toho, ktorá je menšia 1vmin = 1vw alebo 1vh, podľa toho, ktorá je menšia 100vmax = 100vw alebo 100vh, podľa toho, ktorá je väčšia 1vmax = 1vw alebo 1vh, podľa toho, čo je väčšie 

Takže v prípade a orientácia na výšku, 100vmin rovná sa 100vw, ako je výrez menšie horizontálne ako vertikálne. Z toho istého dôvodu, 100vmax bude sa rovnať 100vh.

Podobne, v prípade a orientácia na šírku, 100vmin rovná sa 100vh, ako je výrez vertikálne menší ako horizontálne. A samozrejme, 100vmax bude sa rovnať 100vw tu.

Príklad: Vytvorte čitateľné texty hrdiny na každej obrazovke

Vmin a vmax jednotky sú oveľa menej známe než vw a vh. Môžu sa však výborne používať ako a nahradiť orientáciu @media dotazy. Napríklad, Vmin a vmax môže prísť vhod, keď máte prvky, ktoré môžu vyzerať zvláštne pri rôznych pomeroch strán.

Nový kód má skvelý návod, v ktorom diskutuje o tom, ako môžete udržať hrdinu text čitateľný na každej obrazovke pomocou Vmin jednotkou. Hrdinové texty sú náchylné na pohľad príliš malé na mobilných zariadeniach a príliš veľké na veľkých monitoroch.

Tu je hlavná myšlienka ich riešenia:

 h1 veľkosť písma: 20vmin; font-family: Avenir, sans-serif; veľkosť písma: 900; text-align: center;  

V demo Codepen sa môžete pozrieť ako Vmin rieši problém čitateľnosti hrdinských textov. Prístup k “Celá strana” pohľad na Codepen, potom zmena veľkosti okna prehliadača horizontálne i vertikálne, aby ste videli, ako sa mení text hrdiny.

Podpora prehliadača

Ako vidíte na nižšie uvedenom grafe CanIUse, podpora prehliadača je pomerne dobrá pre zobrazovacie jednotky. Majte však na pamäti, že niektoré verzie IE a Edge nepodporujú vmax. Tiež iOS 6 a 7 majú problém s vh jednotka, ktorý bol opravený v systéme iOS 8.