Единицы измерения vh, vw, vmin, vmax. Единицы измерения длины в CSS

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

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

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

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

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

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

В примере 1 показано применение указанных единиц.

Пример 1. Использование относительных единиц

Размер 2 em

Размер 2 ex

Размер 30 пикселов

Размер 200%

Результат данного примера показан ниже (рис. 1).

Рис. 1. Размер текста при различных единицах

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

Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом. В табл. 2 перечислены основные такие единицы.

Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта. Многие люди привыкли задавать размер шрифта в текстовых редакторах, например, 12. А что это число означает, не понимают. Так это именно пункты и есть, они родные. Конечно они нам не родные, мы привыкли измерять все в миллиметрах и подобных единицах, но пункт, пожалуй, единственная величина из не метрической системы измерения, которая используется у нас повсеместно. И все благодаря текстовым редакторам и издательским системам. В примере 2 показано использование пунктов и других единиц.

Пример 2. Использование абсолютных единиц

Размер 0.5 дюйма

Размер 8 миллиметров

Размер 24 пункта

Результат использования абсолютных единиц измерения показан ниже (рис. 2).

Рис. 2. Размер текста при различных единицах

В CSS3 появились новые единицы измерения. (Я, кажется, уже говорил об этом. eng ) Вы уже слышали о px, pt, em и новых rem. Давайте рассмотри еще несколько: vw и vh.

Часто в макете есть элементы, которые гарантировано должны умещаться во вьюпорт браузера. В общем случае для этого используется JavaScript. Проверям размер вьюпорта и изменяем размеры элементов соответствующим образом. Если пользователь изменяет размер окна браузера, то процедура повторяется.

С помощью vw/vh мы можем устанавливать размер элементов относительно размера вьюпорта. Единицы vw/vh интересны тем, что 1vw - единица равная 1/100"ой ширины вьюпорта. Что бы присвоить элементу ширину, равную ширине вьюпорта, например, надо установить width:100vw.

Как это можно использовать

Лайтбоксы - прекрасный кандидат для использования vw и vh, так как обычно позиционируется относительно вьюпорта, однако мне кажется, что position:fixed со значениями top, bottom, left и right использовать проще, так как можно вообще не устанавливать высоту и ширину .

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

Img { max-height:95vh; }

В данном случае я устанавливаю высоту 95vh что бы оставить немного места вокруг, когда они на экране.

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

Если rem поддерживаются почти всеми основными браузерами включая IE9, то с использованием vw и vh стоит повременить. На данный момент их поддерживает только Internet Explorer 9.

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

Знакомьтесь - единицы

1. «Ems» (em): «em» - это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании "%", ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).

Итак, в чем же разница?

Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.

Изменение Font-size от 100% до 120%.

Как вы можете видеть, «em» и "%" увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и "%" предпочтительнее в использовании для текста веб-документа.

«em» vs "%"

Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и "%". В теории, единицы «em» и "%" являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.

В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c "%" на «em» (то есть body {font-size: 1em;}), вы, должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда клиент меняет «Размер шрифта» в настройках своего браузера (такая возможность предусмотрена в во многих браузерах, например, Internet Explorer).

Размер шрифта, когда клиент изменяет размер текста в браузере.

Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и "%". Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем "%", а при установке «Largest» наоборот «em» отображается гораздо большим, чем "%". И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.

Вердикт

В теории, единицы «em» - это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в "%" позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в "%" изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.

Победитель : процент (%).

В 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 также можно использовать для выравнивания элемента по центру страницы.

Применение атрибута font-size для масштабирования текста является одним из самых сложных аспектов стилевого оформления в CSS. CSS предлагает четыре единицы для измерения размера текста, отображаемого в веб-браузере. Какая из этих четырех единиц наиболее подходит для веб-документов? Этот вопрос вызвал множество обсуждений и споров. Дать однозначный ответ на такой вопрос сложно.

Знакомимся с единицами

Эм (em ): em это масштабируемая единица, которая используется для веб-документов. Один em равняется текущему размеру шрифта. Например, если размер шрифта документа 12pt , то 1em равняется 12pt . Поскольку em масштабируется, то 2em равняется 24pt , .5em равняется 6pt и т.д. Благодаря своей масштабируемости и высокой совместимости с мобильными устройствами, em все чаще используется в веб-документах.

Пиксели (px ): Пиксели это единицы фиксированного размера, которые используются для всего, что читается на компьютерном экране. Один пиксель равняется одной точке на компьютерном экране (это наименьшее деление разрешения вашего экрана). Многие веб-дизайнеры используют в веб-документах пиксели, чтобы при отображении в браузере вебсайт выглядел идеально с точки зрения пикселей. Единственная проблема заключается в том, что пиксели нельзя увеличить для удобства читателей со слабым зрением или уменьшить для удобства чтения на мобильных устройствах.

Точки (pt ): Точки традиционно используются в печатных изданиях (т.е. для всего, что печатается на бумаге). Одна точка равняется 1/72 дюйма. Точки очень похожи на пиксели тем, что они имеют фиксированный размер и их нельзя увеличить/уменьшить.

1. Проценты (% ): Процент во многом похож на em , за исключением нескольких принципиальных различий. Во-первых, текущий размер шрифта равняется 100% (т.е. 12pt = 100%). Использование единицы Процент позволяет вам увеличивать/уменьшать свой текст для удобства чтения.

В чем же различие?

Разницу между этими единицами легко понять на конкретных примерах. Вот как они соотносятся друг с другом: 1em = 12pt = 16px = 100%. Давайте посмотрим, что произойдет, когда мы увеличим основной размер шрифта (используя CSS-селектор body) с 100% до 120%.

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

EM или Процент?

Мы выяснили что Точка и Пиксель не лучшие единицы для веб-документов. Итак, у нас остались Эм и Процент. Теоретически, Эм и Процент – одинаковые единицы, но на практике между ними есть мелкие различия, которые нельзя не учитывать.

В приведенном выше примере мы использовали единицу Процент в качестве базового размера шрифта (для тэга body). Если вы измените базовый размер шрифта с Процентов на Эм (т.е. body { font-size: 1em; }), то разницы вы, скорее всего, не заметите. Давайте посмотрим, что произойдет, когда размером шрифта для body является 1em , и когда клиент меняет в браузере настройку «Размер текста» (такая настройка доступна в некоторых браузерах, например в Internet Explorer).

Когда размер текста в браузере клиента установлен на «средний» (medium), между Эм и Процентом различий не наблюдается. Но если эту настройку изменить, то разница станет вполне заметной. При настройке «Самый мелкий» (Smallest) Эм оказываются намного мельче, чем Проценты. А при настройке «Самый крупный» (Largest) все наоборот – Эм намного больше, чем Проценты. Можно сказать, что единицы Эм масштабируются, как им и положено делать, но на практике такой текст масштабируется слишком резко, и на некоторых устройствах самый мелкий текст становится нечитаемым.

Вывод

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

Победитель: процент (%).

Обычно когда я создаю новый дизайн, то для элемента body я использую проценты (body { font-size: 62.5%; }), а затем использую em для дальнейшего масштабирования. Пока в настройках для body используется единица Процент, вы можете использовать либо Процент, или Эм для любых других правил и селекторов CSS и при этом пользоваться преимуществами, которые дает использование Процента в качестве основного размера шрифта.

За последние несколько лет такая практика стала очень распространенной в веб-дизайне.
Пиксели сейчас используются в качестве допустимых единиц размера шрифта (для чтения мелкого текста пользователи могут использовать функцию браузера «зум»). Однако использование пикселей становится проблематичным из-за мобильных устройств с экранами с очень высокой плотностью пикселей (некоторые устройства Android и iPhone имеют плотность в 200-300 пикселей на дюйм, в связи с чем шрифты в 11 и 12-пикселей становятся плохо различимыми). Итак, я продолжаю использовать Процент в качестве основного размера шрифта для веб-документов.