Я упоминала новые (относительно) единицы измерения. Эти единицы – vw, vh, vmin и vmax, они основаны на размере вьюпорта браузера. Их фактический размер меняется в зависимости от изменения области просмотра браузера, что делает эти единицы идеальными для адаптивного дизайна. Хотя в моем предыдущем посте я выступила против использования этих единиц для указания размеров шрифта, они могут быть очень полезны для работы с элементами макета.

Единицы измерения viewport

Единицы измерения viewport являются относительными единицами, это означает что они не могут быть измерены объективно. Их размер определяется размером области просмотра в браузере. Существуют четыре единицы, относящиеся к области просмотра.

Я сконцентрирую внимание на первых двух, так как они наиболее часто используются. Во многих случаях единицы viewport (vh и vw) пересекаются с процентами в плане возможностей. Тем не менее, каждая из них имеет свои сильные и слабые стороны.

Если резюмировать, то получится следующее:

Когда имеешь дело с шириной, то лучше подходят %, а если с высотой, то лучше vh.

Элементы во всю ширину страницы: % > vw

Как я уже говорила vw определяет размер элемента исходят из ширины viewport. Однако, браузеры рассчитывают размер с учетом места для скроллбара.

Если ширина страницы превышает ширину viewport, то появляется полоса прокрутки. Однако на деле ширина viewport больше, чем ширина элемента html

Viewport > html > body

Поэтому если вы установите ширину элемента в 100vw, то элемент выйдет за пределы html и body. в данном примере я сделала красную границу вокруг элемента html и залила разделы разными цветами.

Из-за этого нюанса делать элементы на всю ширину страницы лучше при помощи процентов, а не опираясь на ширину viewport.

Элементы на всю высоту страницы: vh > %

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

Используя vh добиться такого эффекта достаточно просто:

Example { height: 100vh; }

Вне зависимости от того как как вложен элемент.example его размеры могут быть заданы относительно размеров области просмотра. Проблема прокрутки не потревожит нас так как большинство сайтов не имеют горизонтального скроллбара

Вот несколько примеров того, как можно использовать единицы измерения vh.

Полноэкранные фоновые изображения

Типичное использование единицы измерения vh – для создания фонового изображения, которое охватывает всю высоту и ширину экрана, независимо от размера устройства. Сделать это достаточно легко.

Bg { position: relative; background: url("bg.jpg") center/cover; width: 100%; height: 100vh; }

Аналогичным образом мы можем сделать эффект «страниц», задав каждому разделу размеры области просмотра.

Section { width: 100%; height: 100vh; }

Мы можем использовать JavaScript чтобы создать иллюзию перелистывания страниц.

$("nav").on("click", function() { if ($(this).hasClass("down")) { var movePos = $(window).scrollTop() + $(window).height(); } if ($(this).hasClass("up")) { var movePos = $(window).scrollTop() - $(window).height(); } $("html, body").animate({ scrollTop: movePos }, 1000); })

Складывающееся изображение

Vh может также использоваться для контроля размера изображения в пределах страницы. Например, в рамках статьи. Мы хотим убедиться, что любое изображение будет показано полностью независимо от размера экрана.

Нам понадобится следующий код

Img { width: auto; /* Автоматическая ширина для пропорциональности высоты */ max-width: 100%; /* Не больше ширины родительского элемента */ max-height: 90vh; /* Не превышая высоту viewport */ margin: 2rem auto; }

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

Поскольку данные единицы измерения являются относительно новыми, по-прежнему существуют проблемы при работе с определенными браузерами.

Вот как их можно решить.

Единицы измерения CSS играют важную роль в создании сайтов и задании размеров различных элементов. Значения CSS могут быть выражены положительными или отрицательными числами, хотя некоторые свойства принимают только положительные числа. Числовое значение сопровождается двухбуквенной аббревиатурой, которая обозначает фактическую единицу длины. Например, cm (сантиметры ), px (пиксели ) или em CSS . Исключением из этого правила является значение 0 (ноль ), для которого не требуется указывать единицу измерения.

Единицы измерения CSS бывают двух типов: абсолютные и относительные.

Абсолютные единицы измерения длины в CSS

Абсолютные единицы измерения CSS не подходят для веб-дизайна. Они представляют собой цифровое обозначение результатов измерений в физическом мире и не зависят от размера и разрешения экрана. Абсолютные длины с одним и тем же значением могут отличаться на разных экранах. Это вызвано различием DPI экрана (точек на дюйм ).

Экраны высокого разрешения имеют более высокий показатель DPI по сравнению с экранами меньшего разрешения, благодаря чему на них изображения и текст выглядят меньше. Абсолютные единицы используются при определении стилей в полиграфии, где измерения происходят в дюймах, пунктах и пиках.

Абсолютные единицы измерения длины:

• cm (сантиметры );
• mm (миллиметры );
• in (дюймы );
• pc (пики );
• pt (пункты );
• px (пиксели ).

Большинство абсолютных единиц длины бесполезны в интернете. Единственным исключением является px. Пиксели являются относительными единицами по отношению к разрешению экранов. Для принтеров и мониторов с очень высоким разрешением один пиксель в CSS равняется нескольким пикселям на экране, так что число px на дюйм составляет около 96. Пиксель является наименьшей единицей измерения и обычно используется в качестве ориентира для других.

Относительные единицы измерения длины в CSS

Относительные единицы измерения длины в CSS не имеют фиксированных значений. Их значения зависят от других заданных значений или функций. Они более востребованы в веб-дизайне, потому что упрощают определение размера элемента. С их помощью можно задать ширину, высоту, размер шрифта и т. д. относительно других основных параметров.

Относительные единицы, зависящие от шрифта

Относительные единицы измерения, зависящие от шрифта, ссылаются на заранее установленный размер шрифта или значение свойства font-family :

• ex (высота символа x );
• ch (ширина символа ноль (0) );
• единица измерения em в CSS (высота шрифта текущего элемента );
• rem (размер шрифта корневого элемента ).

ex

Определяется как “высота символа x текущего шрифта ИЛИ половина 1 em ”. То есть высота строчной буквы x установленного шрифта. При изменении значения свойства font-family единица измерения ex изменяется.

ch

Равна ширине символа 0 . Эта единица измерения также меняется при изменении значения свойства font-family .

em

Единица измерения em CSS имеет значение, равное размеру шрифта основного или родительского элемента. Например, если размер шрифта родительского элемента 30px , то значение 1em будет вычисляться как 30px (30 х 1 ) для всех дочерних элементов. Число не обязательно должно быть целым. Если в примере заменить 1em на 0,5, то значение будет 15px (30 х 0,5 ).

Единица измерения em принимает значение родительского тега. Это может привести к нежелательным результатам при использовании вложенных друг в друга элементов.

Допустим, что у нас есть три вложенных друг в друга элемента. Первый элемент (корневой ) имеет размер шрифта 30px , а два вложенных элемента — шрифт в 2em . Элемент, вложенный в корневой, будет иметь размер шрифта, вычисляемый как 60px (30 х 2 ). А элемент, вложенный в него, будет иметь размер шрифта, вычисляемый как 120px (60 х 2 ).

rem

rem подобна em CSS , но ее значение всегда остается равным размеру шрифта корневого элемента. Единица измерения rem пригодится при разработке адаптивных сайтов, потому что позволяет масштабировать всю страницу, изменив размер шрифта в HTML-элементе .

Процентные единицы измерения длины, зависящие от размеров области просмотра

Область просмотра основывается на ширине и высоте окна просмотра и включает в себя:

• vh (высота окна просмотра );
• vw (ширина окна просмотра );
• vmin (наименьшее из (vw, vh ) );
• vmax (наибольшее из (vw, vh ) ).

vw

Это ширина области просмотра. 1vw равен 1/100 ширины окна просмотра. Немного похоже на проценты, за исключением того, что значение остается неизменным для всех элементов независимо от ширины их родительских элементов. Например, если ширина окна 1000px , то 1vw будет равен 10px .

vh

То же самое, что и vw (ширина окна просмотра ), только данная единица измерения зависит от высоты области просмотра. 1vh равен 1/100 высоты просмотра. Например, если высота окна браузера 900px , то 1vh будет 9рх .

vmin

Vmin равно 1/100 от минимального значения между высотой и шириной области просмотра. Другими словами, 1/100 стороны с наименьшей длиной. Например, если размеры окна 1200 на 800 пикселей , то значение vmin будет равно 8px .

vmax

vmax равно 1/100 от максимального значения между высотой и шириной окна просмотра. Другими словами, 1/100 стороны с наибольшей длиной. Например, если размеры были 1200 на 800 пикселей , то vmax равно 12px .

Проценты %

Расстояние, заданное в процентах, зависит от длины родительского элемента. Например, если родительский элемент шириной 1000px , а его дочерний элемент — 50% от этого значения, то ширина дочернего элемента будет 500px .

ПОДДЕРЖКА БРАУЗЕРАМИ

em CSS, ex, px, cm, mm, in, pt, и pc

поддерживаются во всех браузерах, в том числе и в старых версиях IE .

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

Единицы измерения и их значение

В CSS есть 4 типа вьюпорт единиц: vh, vw, vmin и vmax.

Viewport height (vh) – основаны на высоте вьюпорта. Значение 1vh равно 1% высоты вьюпорта.

Viewport width (vw) – основаны на ширине вьюпорта. Значение 1vw равно 1% ширины вьюпорта.

Viewport minimum (vmin) – основаны на минимальной стороне вьюпорта. Если высота вьюпорта меньше ширины, значение 1vmin будет равно 1% от высоты. Точно так же если ширина меньше высоты, то 1vmin будет равен 1% от ширины вьюпорта.

Viewport maximum (vmax) – основаны на большой стороне вьюпорта. Если высота вьюпорта больше ширины, то значение 1vmax будет равно 1% от высоты вьюпорта. Если ширина вьюпорта больше высоты, то 1vmax будет равен 1% от ширины.

Давайте посмотрим, какие значения мы получим в разных ситуациях:

Если вьюпорт 1200px в ширину и 1000px в высоту, то значение 10vw будет равно 120px, а 10vh – 100px. Ширина вьюпорта больше высоты, поэтому 10vmax будет равно 120px, а 10vmin – 100px.

Если повернуть устройство, чтобы ширина стала 1000px, а высота 1200px, то 10vh будет равно 120px, а 10vw превратится в 100px. Интересно, но 10vmax так и останется 120px, потому что теперь значение определяется по высоте вьюпорта. Значение 10vmin также останется 100px.

Если сузить окно браузера до 1000px в ширину и 800px в высоту, то 10vh будет 80px, а 10vw будет 100px. Точно так же значение 10vmax станет 100px, и 10vmin – 80px.

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

В демо видно, как ширина первого дочернего элемента занимает 80% ширины от родителя. У второго дочернего элемента ширина равна 80vw, что делает его шире родителя.

Применение вьюпорт единиц измерения

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

Полноэкранные фоновые изображения и секции

В сети довольно часто можно встретить фоновые изображения на элементах, которые занимают весь экран. Точно так же можно сделать в дизайне сайта, чтобы отдельная секция о товаре или услуге занимала весь экран. В таких случаях можно задать ширину элементов в 100%, а высоту в 100vh.

Разберем следующий пример HTML:

a

< div class = "fullscreen a" > < p > a < p > < / div >

CSS ниже растянет секцию под фоновое изображение на всю ширину:

Fullscreen { width: 100%; height: 100vh; padding: 40vh; } .a { background: url("path/to/image.jpg") center/cover; }

Fullscreen { width : 100 % ; height : 100vh ; padding : 40vh ; background : url ("path/to/image.jpg" ) center / cover ;

Идеально подходящие заголовки

Вы могли слышать или даже использовать jQuery плагин FitText . С помощью этого плагина можно масштабировать заголовки таким образом, чтобы они занимали всю ширину родительского элемента. Как я сказала раньше, значение вьюпорт единиц напрямую зависит от размеров вьюпорта. То есть если указывать font-size заголовков во вьюпорт единицах, то они идеально будут подходить под каждый экран. Если изменится ширина вьюпорта, браузер автоматически изменит заголовок. Нужно лишь определить правильное первоначальное значение для font-size.

Главная проблема с font-size и вьюпорт единицами заключается в том, что размер текста будет сильно варьироваться в зависимости от вьюпорта. Например, font-size со значением 8vw сделает заголовок размером в 96px для вьюпорта с шириной 1200px, 33px для ширины в 400px и 154px для ширины вьюпорта в 1920px. Шрифт может быть, как слишком большим, так и слишком маленьким для удобного чтения. Более подробно прочитать о правильной установке размеров текста с помощью единиц измерения и функции calc() можно в замечательной статье о типографике на вьюпорт единицах .

Легкое центрирование элементов

Вьюпорт единицы могут очень сильно помочь, когда необходимо поместить элемент точно в цент экрана пользователя. Если высота элемента известна, то нужно всего лишь задать верхнее и нижнее значение свойства margin в [(100 - height)/2]vh.

Centered { width : 60vw ; height : 70vh ; margin : 15vh auto ;

Что нужно помнить

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

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

Относительные единицы

Относительные единицы обычно используют для работы с текстом. В табл. 1 перечислены основные относительные единицы.

Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size ). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em , в том смысле, что значения 1em и 100% равны.

Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em , а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.

Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html .

Также есть группа относительных единиц привязанных к размеру области просмотра браузера. В табл. 2 показан их список с описанием.

Абсолютные единицы

Абсолютные единицы представляют собой физические размеры - дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.

Пример

Заголовок размером 30 пикселей

Размер текста 1.5 em

Заголовок размером 24 пункта

Сдвиг текста вправо на 30 миллиметров

Примечание

При установке размеров обязательно указывайте единицы измерения, например width : 30px . В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin : 0 ).

Internet Explorer поддерживает единицу vm вместо vmin .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

×

В CSS3 были добавлены новые относительные единицы измерения, такие как vh , vw , vmin , vmax . Эти единицы вычисляются относительно размеров окна браузера. Для настольных компьютеров ширина окна браузера больше ширины области просмотра (добавляется ширина скроллбара), поэтому если для элемента установить ширину 100vw , то он выйдет за пределы html.

Рис. 1. Полноэкранное фоновое изображение с шириной 100vw

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

IE: 9.0 кроме vmax, вместо vmin используйте vm
Edge: 12.0 кроме vmax, вместо vmin используйте vm
Firefox: 19.0
Chrome: 26.0
Opera: 15.0
Safari: 6.1
iOS Safari: 8.0
Android: 4.4
Chrome for Android: 55.0

1. Единицы vh и vw

Приёмы отзывчивого веб-дизайна базируются на использовании процентных значений. Но проценты далеко не лучшее решение для каждого случая, так как они вычисляются относительно размеров ближайшего родительского элемента. Поэтому, если вы хотите использовать высоту и ширину окна браузера, лучше воспользоваться единицами vh и vw . Например, если высота окна браузера равна 900px , то 1vh будет равен 9px . Аналогично, если ширина окна браузера равна 1600px , то 1vw будет равен 16px .

1.1. Адаптивное полноэкранное фоновое изображение

Так как ширина элемента, указанная с помощью 100vw больше ширины области просмотра, то для создания полноэкранных фоновых изображений лучше использовать ширину 100% , которая будет равна ширине корневого элемента html.

Fullscreen-bg { background: url(image.jpg); background-position: center; background-size: cover; width: 100%; height: 100vh; } Рис. 2. Адаптивно полноэкранное фоновое изображение

1.2. Эффект полностраничного слайда

Чтобы сделать блок на всю высоту окна браузера, необходимо задать height: 100%; для трёх элементов — html, body и непосредственно для самого блока:

Html, body { height: 100%; } section { height: 100%; }

Так как процентные размеры вычисляются относительно значений родительских элементов, то необходимо установить соответствующие значения для каждого элемента DOM. Единица измерения vh не требует установки значений по цепочке, так как её значение вычисляется напрямую относительно окна браузера:

Section { height: 100vh; }

Эффект перелистывания слайдов при клике на стрелку реализуется с помощью небольшого скрипта jQuery:

JQuery(document).ready(function($) { $("nav").on("click", function() { if ($(this).hasClass("down")) { var movePos = $(window).scrollTop() + $(window).height(); } if ($(this).hasClass("top")) { var movePos = $(window).scrollTop() - $(window).height(); } $("html, body").animate({ scrollTop: movePos}, 600); }); });

Высоту, заданную с помощью vh также можно использовать для выравнивания элемента по центру страницы.