Единицы измерения CSS. Сила единицы измерения em в CSS
Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт (pt) и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px . Значит ли это, что для разных свойств нужны разные единицы?
Нет, единицы измерения не имеют отношения к свойствам, но имеют прямое отношение к средствам отображения: экран или бумага.
Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях (margin: 5px) также допускает и значения в дюймах или сантиметрах (margin: 1.2in; margin: 0.5cm), и наоборот.
Но в целом для отображения на экране и для печати лучше использовать разные наборы единиц измерения. Советы по использованию единиц собраны в следующей таблице:
Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc
Если у вас есть под рукой линейка, можете проверить точность
своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm):
72pt
↓
Так называемые абсолютные единицы (cm , mm , in , pt и pc) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру. Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати. На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось.
В прошлом CSS требовал, чтобы абсолютные единицы отображались правильно даже на компьютерных экранах. Но поскольку неправильных реализаций было больше, чем правильных, и никаких улучшений не предвиделось, в 2011-м CSS отказался от этого требования. Сейчас абсолютные единицы обязаны работать правильно только при выводе на печать и на устройствах высокого разрешения.
CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.
Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами - это много. Лучше вместо них использовать относительные единицы, напр. em .
Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em - просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя - крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие text-indent: 1.5em и margin: 1em в CSS крайне популярны.
Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота - это, грубо говоря, высота строчных букв вроде a , c , m , или o . У шрифтов с одинаковым размером (и, соответственно, при одинаковом em) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам.
Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.
Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.
Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.
На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px , чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы c m , pt , mm , in и pc , как объяснялось ).
CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px . Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px , а не pt , cm и т.д.
При работе с CSS всегда наступает такой момент, когда начинаешь понимать, насколько мощным является то или иное его средство. Несмотря на то, что я довольно хорошо понимаю единицу измерения em CSS , по-настоящему прочувствовал их силу только после того, как прочитал запись Simurai . В этой статье я собираюсь использовать его опыт.
Что такое em?
В CSS единица измерения em равна текущему размеру шрифта элемента, к которому применяется em . Когда единицы измерения em используются в дочерних элементах, которые не имеют определенного размера шрифта, они наследуют его от родителей, вплоть до корневого элемента документа.
Посмотрите на следующий код CSS :
Example { font-size: 20px; }
В данном случае 1em этого элемента или его дочерних элементов (при отсутствии других определений font-size ) будет равен 20px . Так что, если мы добавим строку:
Example { font-size: 20px; border-radius: .5em; }
Значение border-radius равное 5em будет равно 10px (то есть 20 * 0,5 ). Аналогично:
Example { font-size: 20px; border-radius: .5em; padding: 2em; }
Значение отступа 2em будет равно 40px (20 * 2 ). Как уже упоминалось, этот тип вычислений применяется к любым дочернему элементу, если у него нет явно определенного размера шрифта. Тогда величина единицы измерения em в CSS будет вычислена подобным образом.
Если в CSS размер шрифта не определен, то em будет равна размеру шрифта, используемого по умолчанию в браузере. Чаще всего это значение составляет 16px . Давайте рассмотрим, как можно использовать этот метод для легкого изменения размера элементов.
Изменение размеров уровней компонента
Понятие «компоненты » довольно популярно сейчас. Оно хорошо подходит для модульных методов CSS , а также для идеи инкапсулированных разделов кода в целом. И я предполагаю, что следующий метод будет еще более интересным, когда веб-компоненты получат широкую поддержку.
Метод работает следующим образом: используется свойство font-size , которое создает основную единицу для различных элементов внутри модуля. Поскольку единица измерения em рассчитывается на основе font-size родительского элемента, то это делает весь компонент легко редактируемым путем изменения свойства font-size родительского элемента.
Давайте посмотрим на это в действии:
Посмотреть демо
Этот модуль состоит из четырех основных элементов. Подвигайте слайдер в верхней части на демонстрационной странице, чтобы изменить размер модуля. Если хотите, можете просмотреть его в полноэкранном режиме . Слайдер содержит одно значение корневого элемента компонента: значение font-size .
Следует отметить, что установка размеров компонента через одно свойство CSS не обязательна, пользователь может менять размеры в настройках. Это сделано для того, чтобы разработчик мог быстро внести изменения, не перебирая различные значения во всех частях компонента.
Когда размер шрифта изменяется, это сказывается на всех em CSS значениях родительского элемента, а также всех его дочерних элементах, делая все части компонента пропорционально гибкими.
Обратите внимание, что:
- Внутри компонента все размеры задаются с помощью em . Кроме внешней границы и изображения, которое при желании можно изменить, но меня устраивает размер, который в данном случае статичен;
- Значок в правом верхнем углу, похожий на слезинку — это псевдоэлемент, который аналогичным образом использует размер шрифта родительского элемента;
- CSS также включает в себя два медиа-запроса, которые корректируют размер шрифта родительского элемента. Что показывает полноценность этого метода, потому что не нужно менять все размеры в медиа-запросах, а только размер шрифта.
Некоторые замечания, упущения и т.д .
Как видно на примере, этот тип гибкого изменения размера не всегда то, что стоит использовать. Его можно несколько ограничить.
Возможно, вам придется подправить некоторые значения единицы измерения em в CSS . И как в случае с границей родительского элемента в примере, вы вряд ли захотите изменить размер. Так как свойство применяется ко всем элементам. Можно решить эту проблему, просто избегая em элементов, которые хотите сохранить.
Не нужно использовать пиксели, чтобы установить корневой font-size . Вы можете использовать для этого em , но помните, что эти единицы измерения будут передаваться по наследству от родителей.
Что насчет rem и Sass?
Единица rem в CSS всегда наследует значение размера шрифта корневого элемента независимо от вычисленного размера шрифта. В HTML корневым является элемент . Таким образом можно использовать rem. Но это означает, что вы должны будете управлять всеми компонентами на странице, используя размер шрифта этого элемента. Это может сработать в некоторых проектах, но я думаю, что этот метод лучше всего работает при изменении размеров отдельного компонента, а не всего документа.
Что касается использования препроцессора Sass , то это уже второстепенный вопрос. В итоге CSS будет использовать любые единицы измерения, которые указаны в Sass коде, и наследование будет работать таким же образом.
Заключение
Я считаю, что это хороший метод для использования при создании CSS-фреймворка или библиотеки компонентов. Этот метод убедительно доказывает, насколько мощным средством является единица измерения em в CSS .
Перевод статьи “The Power of em Units in CSS ” был подготовлен дружной командой проекта .
Ввиду распространенной привычки среди разработчиков использовать пиксельные значения, нам кажется, не все понимают настоящего предназначения параметров 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.
Итак, надеемся, вам понравилось наше сегодняшнее руководство, и вы найдете применение полученным знаниям.
Не забываем комментировать!
Существует несколько свойств в CSS, которые принимают длину (или расстояние) в качестве значений. К этим свойствам относятся свойства блочной модели: width , height , margin , padding , border . Но существуют и другие свойства, например, смещение и размер тени у свойства box-shadow или размер или интервал шрифта. Какие единицы измерения «длины» принято использовать в CSS? Существует много вариантов.
Абсолютные единицы измерения длины
Пиксели px
.wrap { width: 400px; }Пиксель, возможно, лучше всего рассматривать как «абстрактную величину», так как он не имеет ничего общего с физическим пикселем вашего дисплея.
CSS-пиксели - абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана.
Пиксели основная единица измерения в вебе, и так как они отображаются практически единообразно, многие длины высчитываются в пикселях; тот же javascript «разговаривает» на пикселях.
Дюймы in
.wrap { width: 4in; }Дюйм (от нидерл. duim - большой палец) - единица измерения расстояния в некоторых европейских неметрических системах мер. В css дюймы просто сопоставляются с пикселями. Тем не менее, стоит отметить, что дюймы очень редко используются в CSS.
1in == 96px
Сантиметры cm
.wrap { width: 20cm; }Сантиметр - единица длины в различных метрических системах мер, равная 0,01 метра. В css также сопоставляется с пикселями.
1cm == 37.8px
Миллиметры mm
.wrap { width: 200mm; } 1mm == 0.1cm == 3.78pxШрифто-зависимые единицы измерения
Em
.wrap { width: 40em; }Относительная единица измерения. В полиграфии используются дополнительные единицы измерения – одна из них соответствуют ширине заглавной букве М. Основное свойство влияющее на размер шрифта – font-size .
Без всяких дополнительных css правил 1em работает так:
1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
Если в документе изменить размер шрифта, 1em становится равным текущему (установленному) размеру шрифта.
Существуют некоторые на первый взгляд странные вещи. Если элемент с размером шрифта 1.1em находится в элементе с font-size равным также 1.1em , плюс они имеют общего родителя, у которого шрифт равен 1.1em , то результирующая высота шрифта самого вложенного элемента будет равна 1.1 X 1.1 X 1.1 == 1.331em . То есть вы должны учитывать следующее: когда вы назначаете элементу размер шрифта равный, например, 10em , и то это совсем не значит, что куда бы вы ни вложили элемент, его шрифт будет равен 10em . Все зависит от контекста (увидеть доказательство).
Rem
.wrap { width: 40rem; }Rems предлагают лучшую альтернативу em s. Они работают почти одинаково, за исключением одного ключевого отличия: единицы rem всегда соотносится с фиксированным базовым значением, а именно - с размером шрифта корневого элемента документа (в случае HTML это всегда элемент html).
Неполная поддержка браузерами: не работает в IE 8, Safari 4, или iOS 3.2.
Пункты
.wrap { width: 120pt; }Пункты – единица измерения равная 1/72 дюйма. Пункты очень распространены за пределами CSS (вероятно, поэтому они и включены в CSS).
Пункты отлично подходят для печати, но ничто не мешает вам использовать пункты и на сайте. Хотя стоит отметить, что браузеры не всегда одинаково отображают пункты.
Пика
.wrap { width: 12pc; }Та же история, что и с пунктами, но 1pc == 12pt .
Ex
.wrap { width: 60ex; }Эта единица измерения основана на высоте буквы х (в нижнем регистре) текущего шрифта. Иногда информация о высоте буквы x встроена в сам шрифт, иногда браузер вычисляет эту высоту путем измерения высоты символа в нижнем регистре, и в худшем случае, браузер просто устанавливает эту высоту как 0.5em . Чтобы понять, почему используется x-высота, представьте верхний выносной элемент (ascender), например, у строчной буквы d. Х-высота не включает эту выноску.
В отличие от em s, которые не меняются при изменении свойства font-family , единицы измерения ex поменяются, когда вы измените значение у свойства font-family (доказательство).
Ch
.wrap { width: 60ch; }По духу похожа на x-высоту, только вместо x-высоты, используется ширина символа 0. Также меняется при изменении значения у свойства font-family .
Поддержка браузерами: на данный момент не поддерживается браузерами на основе webkit (safari, яндекс, chrome).
Процентные единицы измерения длины, зависящие от размеров области просмотра
Vw
.wrap { width: 10vw; }Это ширина области просмотра устройства. 1vw равен 1% ширине области просмотра. Немного похоже на проценты, за исключением того, что элементы, указанные с единицами измерениями vw , перестают зависеть от ширины родительских элементов.
Поддержка браузерами: не поддерживается любым мобильным браузером, за исключением ios6. Это относится ко всем относительным единицам области просмотра.
Vh
.wrap { width: 10vh; }То же самое, что vw только данная единица измерения зависит не ширины, а от высоты области просмотра устройства.
Vmin
.wrap { width: 20vmin; }1vmin принимает 1vw или 1vh , в зависимости от того, что меньше. При определении размера стандартного шрифта vmin может быть гораздо полезнее, чем vh или vw .
Vmax
.wrap { width: 20vmax; }1vmin принимает 1vw или 1vh , в зависимости от того, что больше.
Поддержка браузерами: браузеры на основе webkit поддерживают vmin, но не поддерживают vmax (пока). Firefox поддерживает vmax .
Проценты
.wrap { width: 50%; }Расстояние заданное в процентах зависит от того же свойства родительского элемента. Например, если элемент имеет ширину равную 450px , а его элемент-ребенок ширину равную 50% , то ширина элемента-ребенка булет равна 225px .
Технически процентами нельзя измерить длину, но я включил проценты в данную статью, так как длина и проценты взаимосвязаны.
Для задания размеров различных элементов в 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 (Черновик спецификации ) - первая черновая версия стандарта.
Загрузка...
