Útmutató a CSS Viewport egységhez vw, vh, vmin, vmax

Viewport-százalékos hossz, vagy nézetablak-egységek mivel ezek gyakrabban hivatkoznak, olyan érzékeny CSS egységek, amelyek lehetővé teszik a méretek meghatározását a nézetablak szélességének vagy hosszának százalékában. A Viewport egységek nagyon hasznosak lehetnek olyan esetekben, amikor más érzékeny CSS egységek, mint például a százalékok nehéz dolgozni.

Habár A W3C dokumentációja a nézetablak-egységek mindent tartalmaznak, amit elméleti szempontból lehet bevezetni, ez nem túl nagy. Tehát ebben a cikkben megnézzük, hogy ezek a CSS-egységek hogyan a gyakorlatban.

Viewport magassága (vh) & viewport szélessége (vw)

W3C meghatározza a nézetablakot mint “a kezdeti tartalmú blokk mérete”. Más szóval, a nézetablak a terület a böngészőablakban vagy bármely más megtekintési terület a képernyőn.

A vw és vh egységek álljon a tényleges nézetablak szélességének és magasságának százalékos aránya. Értéket kaphatnak 0 és 100 között a következő szabályok szerint:

 100vw = 100% a nézetablak szélességének 1vw = 1% -a nézetablak szélességének 100vh = 100% -a nézetablak magasságának 1vh = 1% -a nézetablak magassága 

Különbségek a százalékos egységekhez

Szóval, hogyan különböznek a nézetablakok a százalékos egységektől? Százalékos egységek örökölje a szülőelem méretét míg a nézetablak-egységek nem. A Viewport egységeket mindig a (z) a nézetablak méretének százalékos aránya. Ennek eredményeként a viewport egységek által definiált elem meghaladhatja a szülő méretét.

Példa: Teljes képernyős szakaszok

Teljes képernyős szakaszok valószínűleg a nézetablak-egységek legismertebb felhasználási esetei.

A A HTML nagyon egyszerű; csak van három szakasz egymás alatt és azt akarjuk, hogy mindegyikük legyen fedje le a teljes képernyőt (de nem több).

A CSS-ben használjuk 100vh mint a magasság érték és 100% mint szélesség. Nem használjuk vw alapértelmezés szerint, a görgetősávok is hozzáadódnak a nézetablak méretéhez. Tehát, ha ezt használjuk szélesség: 100vw; a szabály vízszintes görgetősáv megjelenik a a böngészőablak alján.

 * margó: 0; párnázás: 0;  szekció háttérméret: borító; háttérpozíció: központ; szélesség: 100%; magasság: 100vh;  .section-1 háttérkép: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 háttérkép: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 háttérkép: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

Az alábbi gif demóban láthatjuk ezt vh jelentése valóban érzékeny egység.

A fent említett W3C dokumentumok szerint vízszintes görgetősáv kérdés megoldható a túlcsordulás: auto; szabály a gyökér elemre. Ez a megoldás csak részben működik, bár. A vízszintes görgetősáv valóban eltűnik, de szélesség jelentése A nézetablak szélessége alapján még mindig kiszámítható (az oldalsáv is benne van), így az elemek kissé nagyobbak lesznek, mint amilyennek kellene lennie.

Azt mondanám, nem merném használni vw egység be a teljes képernyős elemek méretezése emiatt. Nem is kell rá, mint a szélesség: 100%; szabály tökéletesen működik. A teljes képernyős elrendezésekkel az igazi kihívás mindig az volt, hogy hogyan állítsa be a megfelelő magasságértéket és a vh az egység ragyogó megoldást kínál erre.

Egyéb felhasználási esetek

Ha érdekel egyéb felhasználási esetek vw és vh Lullabotnak van egy nagyszerű cikke, amely felsorolja az a maroknyi valós példák (a Codepen demókkal), például:

• Rögzített arányú kártyák.
• Az elem rövidebb, mint a képernyő.
• Szöveg méretezése.
• Lépjen ki a tartályból.

Az Opera.dev-nek is van egy rövid bemutatója arról, hogyan lehet a tőkeáttételét kihasználni vw egység érzékeny tipográfia létrehozása.

Nem csak a viewport egységeket használhatja a szélesség és magasság tulajdonságait, de bármely másra. Például lehet állítsa be a párnák és margók méretét használni a vw és vh egységeket is.

Viewport min.vmin) & viewport max.v)

A vmin és v az egységek lehetővé teszik a a kisebb vagy nagyobb oldal mérete nézetablak, az alábbi szabályok szerint:

 100vmin = 100vw vagy 100vh, attól függően, hogy melyik kisebb 1vmin = 1vw vagy 1vh, attól függően, hogy melyik kisebb 100vmax = 100vw vagy 100vh, attól függően, hogy melyik nagyobb 1vmax = 1vw vagy 1vh, attól függően, hogy melyik nagyobb 

Tehát az a álló tájolás, 100vmin egyenlő 100vw, mint a nézetablak kisebb, mint függőlegesen. Ugyan azért az okért, 100vmax egyenlő lesz 100vh.

Hasonlóképpen az a táj tájolás, 100vmin egyenlő 100vh, mint a nézetablak kisebb, mint vízszintesen. És természetesen, 100vmax egyenlő lesz 100vw itt.

Példa: Hős szövegek olvasása minden képernyőn

A vmin és v sokkal kevésbé ismertek, mint a vw és vh. Ezek azonban kiválóan használhatók helyettesíti az orientációt @média lekérdezések. Például, vmin és v hasznos lehet, ha olyan elemei vannak, amelyek furcsaak lehetnek különböző képarányokban.

Az új kódnak nagyszerű bemutatója van, amelyben megvitatják, hogyan lehet tartsa a hős szöveg olvashatóvá minden képernyőn a vmin egység. A hős szövegek hajlamosak kinézni túl kicsi a mobilon és túl nagy a nagy monitorokon.

Itt van a megoldásuk ötlete:

 h1 font-size: 20vmin; font-család: Avenir, sans-serif; font-súly: 900; szöveg-igazítás: központ;  

A Codepen demóban megtekintheti, hogyan vmin megoldja a hősszövegek olvashatósági problémáját. Hozzáférés a “Teljes oldal” akkor nézd meg a Codepent átméretezheti a böngésző ablakát vízszintesen és függőlegesen, hogy megnézze, hogyan változik a hős szöveg.

Böngésző támogatás

Mint látható az alábbi CanIUse diagramon, A böngésző támogatása viszonylag jó a viewport egységekhez. Ne feledje azonban, hogy az IE és az Edge egyes verziói nem támogatják v. Az iOS 6 és 7 is problémát okoz a vh egység, amelyet iOS 8-ban rögzítettek.