Краткое руководство по единицам измерения в CSS. Единицы измерения CSS (пиксели, Em и Ex) и функция calc. Примеры

Ввиду распространенной привычки среди разработчиков использовать пиксельные значения, нам кажется, не все понимают настоящего предназначения параметров 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.

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

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

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

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

Приветствую Вас, уважаемые читатели блога webcodius! Для задания размеров различных элементов html страницы, в CSS существуют единицы измерения. Причем могут использоваться как относительные, так и абсолютные единицы.

Абсолютные единицы связаны с физическим миром и не зависят от устройства вывода. Для их указания можно использовать следующие единицы:

Абсолютные единицы используются реже чем относительные и применяются в основном для задания размера текста. А для указания размера текста в основном используют пункт (pt), который получается путем деления одного дюйма на 72 части. Дюйм в свою очередь равен примерно 25,4 миллиметра, соответственно один пункт примерно равен одной трети миллиметра. Пример использования абсолютных единиц измерения:

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

Размер 1 сантиметр

Размер 1 дюйм

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

Размер 1 пика

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

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

1 px в CSS , как мы уже говорили выше, это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность.
При указании процентов размер вычисляется в зависимости от размера родительского элемента. Так, например если ширина родительского элемента 500px, то при указании width:50% ширина элемента будет 250px.

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

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

Размер 150%

Размер 2 em

Размер 2 ex

Результат:

Кроме вышеперечисленных, есть группа относительных единиц привязанных к размеру области просмотра браузера:

Примеры использования:

Размер 2 vw

Размер 2 vh

Размер 2 vmin

Размер 2 vmax

Функция calc ()

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

div {
width: calc (100% — 40px);
}

В этом случае ширина div-а будет равно ширине родительского элемента минус 40 пикселей.

В выражениях можно использовать следующие арифметические действия:

• + — сложение. Символ отделяется пробелами с двух сторон (height: calc (20% + 50px));
• — — вычитание. Символ отделяется пробелами с двух сторон (width: calc (90% — 10px););
• * — умножение (padding: calc (2em*2););
• / — деление. На ноль делить запрещено (width: calc (100%/4);).

В браузерах Firefox до версии 16.0 поддерживается функция -moz-calc, в Chrome до версии 26.0 и в Safari с версии 6.0 поддерживается -webkit-calc.

Например, нам необходимо в резиновом двухколоночном макете сайта сделать так, чтобы между колонками при любом размере окна браузера было расстояние 50px. Тогда с помощью функции calc это делается следующим образом: