Руководство по CSS Viewport Units vw, vh, vmin, vmax

Длина просмотра в процентах, или же единицы просмотра как они чаще упоминаются, являются адаптивными единицами CSS, которые позволяют вам определять размеры в процентах от ширины или длины области просмотра. Единицы области просмотра могут быть весьма полезны в случаях, когда другие отзывчивые единицы CSS, такие как проценты, являются трудно сделать работу.

Хотя Документация W3C в единицах окна просмотра содержится все, что можно ввести в теорию, оно не очень многословно. Итак, в этой статье мы рассмотрим, как эти модули CSS работать на практике.

Высота окна просмотра (В.Х.) & ширина области просмотра (оч.сл.)

W3C определяет область просмотра как “размер исходного содержащего блока”. Другими словами, область просмотра является областью содержится в окне браузера или любая другая область просмотра на экране.

оч.сл. а также В.Х. единицы стоять в процентах от ширины и высоты фактического окна просмотра. Они могут принять значение от 0 до 100 согласно следующим правилам:

 100vw = 100% ширины области просмотра 1vw = 1% ширины области просмотра 100vh = 100% высоты области просмотра 1vh = 1% высоты области просмотра 

Различия в процентах

Итак, чем же отличаются единицы просмотра в процентах от единиц измерения в процентах? Процентные единицы наследовать размер своего родительского элемента в то время как единицы просмотра окна не делают. Единицы просмотра всегда рассчитываются как процент от размера области просмотра. В результате элемент, определяемый единицами просмотра, может превышать размер своего родителя..

Пример: полноэкранные разделы

Полноэкранные разделы пожалуй, наиболее широко известные случаи использования единиц просмотра.

HTML довольно прост; у нас просто есть три раздела друг под другом и мы хотим, чтобы каждый из них покрыть весь экран (но не более).

В CSS мы используем 100vh как рост значение и 100% как ширина. Мы не используем оч.сл. блок здесь как по умолчанию, полосы прокрутки также добавлены в размер области просмотра. Итак, если мы использовали ширина: 100 кВт; править горизонтальная полоса прокрутки появится на нижняя часть окна браузера.

 * поле: 0; отступы: 0;  раздел background-size: cover; background-position: center; ширина: 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');  

На демоверсии GIF ниже, вы можете увидеть, что В.Х. является действительно отзывчивый блок.

Согласно документам W3C, вышеупомянутые горизонтальная полоса прокрутки может быть решена путем добавления переполнение: авто; Правило для корневого элемента. Это решение работает только частично, хоть. Горизонтальная полоса прокрутки, действительно, исчезает, но ширина является по-прежнему рассчитывается на основе ширины области просмотра (боковая панель включена), поэтому элементы будут немного больше, чем должны быть.

Я бы сказал, я бы не посмел использовать оч.сл. блок на подбор полноэкранных элементов по этой причине. Нам это даже не нужно, так как ширина: 100%; Правило работает отлично. С полноэкранными макетами настоящей проблемой всегда было то, как установить правильное значение высоты и В.Х. блок дает блестящее решение для этого.

Другие варианты использования

Если вы заинтересованы в другие варианты использования оч.сл. а также В.Х. У Lullabot есть отличная статья, в которой перечислены горстка реальных примеров (с демонстрационными примерами Codepen), такими как:

• Карты с фиксированным соотношением.
• Держать элемент короче экрана.
• Масштабирование текста.
• Вырваться из контейнера.

В Opera.dev также есть краткое руководство о том, как использовать оч.сл. единица в создание отзывчивой типографии.

Вы не можете использовать только единицы просмотра ширина а также рост свойства, но на любой другой. Например, вы можете установить размер отступов и полей с использованием оч.сл. а также В.Х. единицы тоже.

Окно просмотра мин (Vmin) & макс. область просмотраVmax)

Vmin а также Vmax единицы позволяют вам получить доступ к размер меньшей или большей стороны окна просмотра, в соответствии со следующими правилами:

 100vmin = 100vw или 100vh, в зависимости от того, что меньше 1vmin = 1vw или 1vh, в зависимости от того, что меньше 100vmax = 100vw или 100vh, в зависимости от того, что больше 1vmax = 1vw или 1vh, в зависимости от того, что больше 

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

Точно так же в случае альбомная ориентация, 100vmin равно 100vh, как окно просмотра меньше по вертикали, чем по горизонтали. И, конечно же,, 100vmax будет равен 100vw Вот.

Пример: сделать тексты героев удобочитаемыми на каждом экране

Vmin а также Vmax единицы гораздо менее широко известны, чем оч.сл. а также В.Х.. Тем не менее, они могут быть превосходно использованы в качестве заменить ориентацию @средства массовой информации запросы. Например, Vmin а также Vmax может пригодиться, если у вас есть элементы, которые могут выглядеть странно в разных пропорциях.

В новом коде есть отличное учебное пособие, в котором они обсуждают, как вы можете держать текст героя читабельным на каждом экране, используя Vmin Блок. Тексты героев склонны смотреть слишком маленький на мобильном и слишком большой на больших мониторах.

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

 h1 font-size: 20vmin; семейство шрифтов: авенир, без засечек; вес шрифта: 900; выравнивание текста: по центру;  

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

Поддержка браузера

Как вы можете видеть на графике CanIUse ниже, поддержка браузера относительно хорошая для единиц просмотра. Однако имейте в виду, что некоторые версии IE и Edge не поддерживают Vmax. Кроме того, iOS 6 и 7 имеют проблемы с В.Х. единица измерения, который был исправлен в iOS 8.