CSS Viewport vienību rokasgrāmata vw, vh, vmin, vmax

Viewport procentuālais garums, vai viewport vienības kā tie ir biežāk minēti, ir atsaucīgas CSS vienības, kas ļauj definēt izmērus procentos no skata loga platuma vai garuma. Viewport vienības var būt diezgan noderīgas gadījumos, kad ir citas atbildīgas CSS vienības, piemēram, procenti grūti strādāt.

Lai gan W3C dokumentācija Viewport vienībās ir viss, kas var tikt teorētiski, tas nav ļoti verbozs. Tātad šajā rakstā mēs apskatīsim, kā šīs CSS vienības strādā praksē.

Viewport augstums (vh) & viewport platums (vw)

W3C definē skatu portu kā “sākotnējā bloka lielums”. Citiem vārdiem sakot, skats ir apgabals pārlūkprogrammas logā vai jebkuru citu skatīšanās zonu ekrānā.

The vw un vh vienībām norādiet faktiskā skata loga platuma un augstuma procentuālo daļu. Viņi var uzņemties vērtību no 0 līdz 100 saskaņā ar šādiem noteikumiem:

 100vw = 100% no skatītāja platuma 1vw = 1% no skata laukuma platuma 100vh = 100% no skatu lauka augstuma 1vh = 1% no skatījuma platuma augstuma 

Atšķirības procentos

Tātad, kā skatītāju vienības atšķiras no procentu vienībām? Procentu vienības mantot vecāku elementa lielumu kamēr skata loga vienības nav. Viewport vienības vienmēr tiek aprēķinātas kā procentuālā daļa no skata loga lieluma. Tā rezultātā elements, ko nosaka skata loga vienības, var pārsniegt tā vecāku lielumu.

Piemērs: pilnekrāna sekcijas

Pilnekrāna sekcijas , iespējams, ir visplašāk pazīstamie skatu loka vienību lietošanas gadījumi.

The HTML ir diezgan vienkāršs; mēs vienkārši esam trīs sekcijas viena otrai un mēs visi vēlamies aptver visu ekrānu (bet ne vairāk).

CSS izmantojam 100vh kā augstums vērtība un 100% kā platums. Mēs to neizmantojam vw vienība šeit ir pēc noklusējuma, ir pievienoti arī ritjoslas līdz skatu loga lielumam. Tātad, ja mēs izmantojām platums: 100vw; noteikums a horizontālā ritjosla parādīsies pārlūkprogrammas loga apakšā.

 * starpība: 0; polsterējums: 0;  sadaļa fona izmērs: vāks; fona stāvoklis: centrs; platums: 100%; augstums: 100vh;  .section-1 fona attēls: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 fona attēls: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 fona attēls: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

Tālāk redzamajā gif demonstrācijā jūs varat to redzēt vh ir patiesi atsaucīga vienība.

Saskaņā ar iepriekš minētajiem W3C dokumentiem horizontālais ritjoslas jautājums var atrisināt, pievienojot pārplūde: auto; noteikums uz saknes elementu. Šis risinājums darbojas tikai daļēji, tomēr. Patiešām, horizontālā ritjosla pazūd, bet platums ir joprojām tiek aprēķināts, pamatojoties uz skatījuma platuma platumu (iekļauts sānjosla), tāpēc elementi būs nedaudz lielāki par tiem.

Es teiktu, ka es negribētu izmantot vw ieslēgt pilna ekrāna elementu izmēri šī iemesla dēļ. Mums tas pat nav vajadzīgs platums: 100%; noteikums darbojas perfekti. Ar pilnekrāna izkārtojumiem patiesais izaicinājums vienmēr ir bijis, kā iestatiet pareizu augstuma vērtību un vh vienība tam sniedz izcilu risinājumu.

Citi lietošanas gadījumi

Ja jūs interesē citi lietošanas gadījumi vw un vh Lullabot ir lielisks raksts, kurā uzskaitīti a nedaudz reālu dzīves piemēru (ar Codepen demo), piemēram:

• Fiksētās attiecības kartes.
• Saglabājot elementu īsāku nekā ekrāns.
• Mērogošanas teksts.
• Izkāpiet no konteinera.

Opera.dev ir arī īsa apmācība par to, kā jūs varat izmantot sviras efektu vw vienība veidojot atsaucīgu tipogrāfiju.

Jūs nevarat izmantot tikai skata loga vienības platums un augstums īpašībām, bet uz jebkuru citu. Piemēram, varat iestatiet polsterējumu un margu lielumu izmantojot vw un vh vienībām.

Viewport min (vmin) & viewport maks.vmax)

The vmin un vmax vienības ļauj piekļūt mazākās vai lielākās puses izmērs skata loga, saskaņā ar šādiem noteikumiem:

 100vmin = 100vw vai 100vh, atkarībā no tā, kas ir mazāks 1vmin = 1vw vai 1vh, atkarībā no tā, kas ir mazāks 100vma = 100vw vai 100vh, atkarībā no tā, kurš ir lielāks 1vmax = 1vw vai 1vh, atkarībā no tā, kurš ir lielāks 

Tātad a gadījumā portreta orientācija, 100vmin ir vienāds ar 100vw, kā skata logs horizontāli nekā vertikāli. Šī paša iemesla dēļ, 100vmax būs vienāds ar 100vh.

Līdzīgi a gadījumā ainavas orientācija, 100vmin ir vienāds ar 100vh, kā skata logs mazāka vertikāli nekā horizontāli. Un protams, 100vmax būs vienāds ar 100vw šeit.

Piemērs: Padarīt varoņu tekstu lasāmus katrā ekrānā

The vmin un vmax vienības ir daudz mazāk pazīstamas nekā vw un vh. Tomēr tos var izmantot lieliski kā a aizstāt orientāciju @media vaicājumi. Piemēram, vmin un vmax var būt noderīgi, ja jums ir elementi, kas var izskatīties dīvaini dažādos aspektos.

Jaunajam kodeksam ir lieliska apmācība, kurā viņi apspriež, kā jūs varat saglabājiet varoņa tekstu lasāmu katrā ekrānā, izmantojot vmin vienību. Varonis izskatās varonis pārāk mazs mobilajos un pārāk lielos monitoros.

Šeit ir galvenā viņu risinājuma ideja:

 h1 font-size: 20vmin; font-family: Avenir, sans-serif; fontu svars: 900; teksta saskaņošana: centrs;  

Codepen demonstrācijā varat pārbaudīt, kā vmin atrisina varoņu tekstu lasāmības problēmu. Piekļūstiet “Pilna lapa” skats uz Codepen mainīt pārlūka loga izmērus gan horizontāli, gan vertikāli, lai redzētu, kā mainās varoņa teksts.

Pārlūka atbalsts

Kā redzams zemāk esošajā CanIUse diagrammā, pārlūkprogrammas atbalsts ir samērā labs skatītāju vienībām. Tomēr atcerieties, ka dažas IE un Edge versijas neatbalsta vmax. Arī IOS 6 un 7 ir problēma ar vh vienību, kas tika noteikts iOS 8.