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

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

• Абсолютные значения, которые связаны с физическими величинами, такие как пики и пиксели.

• Относительные единицы, которые связаны с самим элементом или его контекстом.

Как правило, относительные единицы измерения предпочтительны для использования в адаптивном дизайне, а абсолютные единицы измерения подходят для элементов фиксированной длинны, таких как тонкие рамки.

Абсолютные единицы измерения CSS — это пиксель (px), пункт (pt), дюйм (in), сантиметр (cm), миллиметр (mm), пика (pc), четверть миллиметра (q).

Относительные единицы измерения CSS — это процент (%), em, ex, rem, ширина устройства отображения (vw), высота устройства отображения (vh), меньшее измерение устройства отображения (vmin), большее измерение устройства отображения (vmax), символ (ch).

Для дополнительной информации о менее известных единицах измерения предоставлены ссылки на уроки с детальным объяснением.

1em — это ширина буквы «m» в текущем шрифте, 1ex – высота буквы x в текущем шрифте, rem – корневой em, т. е., это ширина буквы «m» в текущем шрифте для корня документа.

Единица измерения ch, как и em, — это ширина, но символа 0 (нуль) в выбранном шрифте.

Нет смысла задавать единицу измерения, если задаваемое значение равно нулю: нуль сантиметров это то же самое, что и нуль пикселей. (Примечание редакции (переводчика Maya_Specctra или как ты посчитаешь нужным написать): Хотя вполне допустимо добавлять единицы измерения к нулевым значениям, чтобы не забыть, что именно используется, если значение придется изменить. ) Во всех остальных случаях нужно обязательно задавать единицы измерения следующим образом:  2em, 2px, и т. д.

Во всех системах измерения можно задавать значения с плавающей точкой: 2.25rem, 5.3cm, и т. д.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание таблицы стилей для сброса для кода CSS и HTML5
• Использование селекторов псевдоклассов
• Использование контекстного селектора и селектора прямого потомка в CSS