Ръководство за CSS Viewport единици vw, vh, vmin, vmax

Дължини на процентите на изгледа, или единици за изглед тъй като те са по-често споменавани, са реагиращи CSS единици, които ви позволяват да дефинирате размери като процент от ширината или дължината на прозореца за изглед. Елементите на Viewport могат да бъдат много полезни в случаите, когато други отзивчиви CSS единици, като проценти, са трудно да се работи.

Макар че Документацията на W3C в единиците за визуализация има всичко, което може да бъде поставено на теория, не е много детайлно. Така че в тази статия ще разгледаме как тези CSS единици на практика.

Височина на екранния изглед (вх) и ширина на екрана за изглед (VW)

W3C определя визуалния прозорец като “размер на първоначално съдържащия се блок”. С други думи, изгледът е областта съдържащи се в прозореца на браузъра или друга област за преглед на екрана.

Най- VW и вх единици стойността на ширината и височината на действителния екран. Те могат да вземат стойност между 0 и 100 съгласно следните правила:

 100vw = 100% от ширината на прозореца за изглед 1vw = 1% от ширината на екрана за изглед 100vh = 100% от височината на визуалния прозорец 1vh = 1% от височината на екрана 

Разлики в процентните единици

И така, как се различават единиците за визуализация от процентните единици? Процентни единици наследи размера на родителския им елемент докато единиците изглед не го правят. Елементите на Viewport винаги се изчисляват като процент от размера на екрана за изглед. В резултат на това елемент, дефиниран от единици за визуализация, може да надвишава размера на неговия родител.

Пример: Раздели на цял екран

Раздели на цял екран вероятно са най-известните случаи на използване на единици за изглед.

Най- HTML е доста прост; просто имаме три секции един под друг и ние искаме всеки от тях да покрийте целия екран (но не повече).

В CSS използваме 100vh като височина стойност и 100% като широчина. Не използваме VW тук, както по подразбиране, се добавят и лентите за превъртане до размера на екрана за изглед. Така че, ако използвахме ширина: 100vw; правило a хоризонтален плъзгач ще се появи в отдолу на прозореца на браузъра.

 * margin: 0; пълнеж: 0;  раздел размер на фона: корица; фонова позиция: център; ширина: 100%; височина: 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');  

На демото по-долу можете да видите това вх е наистина реагиращо устройство.

Според документите на W3C, гореспоменатото хоризонтална лента за превъртане може да бъде решен чрез добавяне на препълване: автоматично; правило към основния елемент. Това решение работи само частично, все пак. Хоризонталният плъзгач наистина изчезва, но широчина е все още се изчислява въз основа на ширината на екрана за изглед (страничната лента е включена), така че елементите ще бъдат малко по-големи, отколкото би трябвало да бъдат.

Бих казал, че не бих посмял да използвам VW единица оразмеряване на елементи на цял екран поради тази причина. Ние дори не се нуждаем от нея, като ширина: 100%; правило работи перфектно. С макети на цял екран, истинското предизвикателство винаги е било как задайте подходяща стойност на височината и вх единица дава брилянтно решение за това.

Други случаи на употреба

Ако се интересувате други случаи на употреба VW и вх Lullabot има страхотна статия, която изброява a няколко примера от реалния живот (с кодове на Codepen), като:

• Карти с фиксирани съотношения.
• Поддържане на елемент по-кратък от екрана.
• Мащабиране на текст.
• Разрушаване на контейнера.

Opera.dev също има кратък урок за това как можете да използвате лоста на VW единица създаване на отзивчива типография.

Не можете да използвате само единици на екранния прозорец в широчина и височина имоти, но на всеки друг. Например, можете задайте размера на подложките и полетата използвайки VW и вх единици.

Мин.Vmin) & max.Vmax)

Най- Vmin и Vmax единици ви позволяват достъп до размер на по-малката или по-голямата страна на прозореца за изглед, съгласно следните правила:

 100vmin = 100vw или 100vh, което е по-малко 1vmin = 1vw или 1vh, което е по-малко 100vmax = 100vw или 100vh, което е по-голямо 1vmax = 1vw или 1vh, което е по-голямо 

Така че, в случай на a портретна ориентация, 100vmin е равно на 100vw, като прозореца за изглед по-малки хоризонтално, отколкото вертикално. По същата причина, 100vmax ще бъде равен на 100vh.

По същия начин, в случай на a пейзажна ориентация, 100vmin е равно на 100vh, като прозореца за изглед по-малки вертикално, отколкото хоризонтално. И разбира се, 100vmax ще бъде равен на 100vw тук.

Пример: Направете текстове за герой четливи на всеки екран

Най- Vmin и Vmax единици са много по-малко известни от VW и вх. Въпреки това, те могат да бъдат отлично използвани като заместител на ориентацията @media запитвания. Например, Vmin и Vmax може да ви бъде от полза, когато имате елементи, които може да изглеждат странно при различни аспектни съотношения.

Новият кодекс има голям урок, в който те обсъждат как можете дръжте героя текст четлив на всеки екран, като използвате Vmin мерна единица. Текстовете на героите са склонни да изглеждат твърде малки за мобилни устройства и прекалено големи на големи монитори.

Ето основната идея на тяхното решение:

 h1 размер на шрифта: 20vmin; семейство шрифт: Avenir, sans-serif; тегло на шрифта: 900; text-align: center;  

В демото Codepen можете да проверите как Vmin решава проблема с четливостта на текстовете на героите. Достъп до “Пълна страница” тогава на Codepen преоразмерете прозореца на браузъра си хоризонтално и вертикално, за да видите как се променя текстът на героя.

Поддръжка на браузър

Както можете да видите на диаграмата CanIUse по-долу, Поддръжката на браузъра е сравнително добра за единици за изглед. Имайте предвид обаче, че някои версии на IE и Edge не поддържат Vmax. Също така, iOS 6 и 7 имат проблем с вх мерна единица, който е фиксиран в iOS 8.