Ввиду распространенной привычки среди разработчиков использовать пиксельные значения, нам кажется, не все понимают настоящего предназначения параметров em, и того, как они работают в CSS.

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

Определение em

В спецификации представлено довольно параметру em:

Равное вычисленному значению параметра font-size, примененного к элементу

Другими словами, если у нас будет следующий код CSS:

Element {
font-size: 20px;
}
Это означает, что 1em, установленное в том элементе или в любом из его дочерних элементах, будет равное 20 пикселям. .

Если вы используете следующий код:

Element {
font-size: 20px;
width: 4em;
height: 4em;
}
Это означает, что ширины и высота элемента (указанные здесь как 4em x 4em) будут составлять 80px x 80px (20px * 4 = 80 px).

Рассмотрим подробнее

Ключом к запоминанию является предназначение em и происхождение данного параметра. Следуя :

Em – это единица изменения в типографии, равное текущему указанному размеру шрифта. Название em связано с буквой M. Изначально данная единица была получена из ширины заглавной буквы М при использовании определенного шрифта

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

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

А что если я не использую параметр font-size?

В примере, приведенном выше, и в JSBin, на который мы сослались, точно указан параметр font-size. Единица em впоследствии выводится из параметра «base». Но что если в элементе не указан точный параметр font-size?

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

«rem» должен быть автоматическим для людей

Пришло время привлечь и новое добавление в CSS: . Данная единица (название получено от «root em») отлично поддерживается во всех браузерах: IE9+, FF3.6+, Chrome, Safari 5+ и Opera 11.6+.

В целом, данная единица очень проста к пониманию. Она дает вам возможность сделать так, чтобы значения единиц em во всем HTML-документе были основаны на одном «главном» значении, указанном в «html »-элементе. Таким образом, вы можете забыть про параметр font-size, так как все em-единицы, использованные в документе, будут основаны на главном значении rem, например:

Html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
И, как и в случае с em, если вы не указываете значение font-size в «html »-элементе, то «главная» единица (root em) будет равна 16 пикселям по умолчанию.

Carpe di-em

Можно выдумать еще целую кучу выражений с em:)

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

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

Итак, надеемся, вам понравилось наше сегодняшнее руководство, и вы найдете применение полученным знаниям.

Не забываем комментировать!

В одной статье нет необходимости.

1px (пиксель) = 1/96 дюйма, но не в CSS. 1 px в CSS - это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность (мобильный телефон или телевизор). В каких бы единицах измерения мы бы не писали код, он приводится именно к px.

1 em = значению font-size родителя. Обратите внимание, что в полигоне ниже font-size жёлтого и коричневого блоков разный, а размер шрифта одинаковый.

16px * 1 = 16px // жёлтый 16px * 0,5 = 8px // зелёный 8px * 2 = 16px // коричневый

1 rem = значению font-size (корневого элемента документа).

16px * 1 = 16px // жёлтый 16px * 0,5 = 8px // зелёный 16px * 2 = 32px // коричневый

1 процент (1%) — значение относительно значения свойства родительского тега.

16px * 100% = 16px // жёлтый 16px * 50% = 8px // зелёный 8px * 200% = 16px // коричневый

При уменьшении ширины родителя, уменьшается и ширина элемента, но не его шрифт.

1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl + или Ctrl - .

1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl + или Ctrl - .

1vmin = 1vw или 1vh. Выбирается то, которое меньше.

1vmax = 1vw или 1vh. Выбирается то, которое больше.

font-size: 16px 100% 1em 1vw 1vh 1vmin 1vmax 1rem ;

font-size: 8px 50% .5em .5vw .5vh .5vmin .5vmax .5rem ;

font-size: 32px 200% 2em 2vw 2vh 2vmin 2vmax 2rem ;

Функция calc()

Никогда не хотелось от процентов вычесть пиксели или емы? Например, для того, чтобы . Теперь это возможно. Функция calc() позволяет реализовать математические выражения

Добавление (символ отделяется пробелами с двух сторон) - вычитание (символ отделяется пробелами с двух сторон) * умножение / деление

Вот ещё один зачётный пример, .

• 1
• 2
• 3
• 4

Для задания размеров различных элементов в 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 появились новые единицы измерения. (Я, кажется, уже говорил об этом. 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.

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