В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.
Содержание
Пиксели: px
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.
- Главное достоинство пикселя – чёткость и понятность
- Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами
Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.
Вот, если интересно, их значения:
- 1mm (мм) = 3.8px
- 1cm (см) = 38px
- 1pt (типографский пункт) = 4/3 px
- 1pc (типографская пика) = 16px
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.
Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.
Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.
Относительно шрифта: em
1em – текущий размер шрифта.
Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.
Размеры в em – относительные, они определяются по текущему контексту.
Например, давайте сравним px с em на таком примере:
24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в
А вот аналогичный пример с em вместо px :
Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.
Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.
Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
В спецификации указаны также единицы ex и ch, которые означают размер символа "x" и размер символа "0" .
Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква "x" и ноль "0" . В этом случае они носят более условный характер.
Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.
Проценты %
Проценты % , как и em – относительные единицы.
Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»
Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.
Это очень важная особенность процентов, про которую, увы, часто забывают.
Отличный источник информации по этой теме – стандарт, Visual formatting model details.
Вот пример с % , он выглядит в точности так же, как с em :
В примере выше процент берётся от размера шрифта родителя.
А вот примеры-исключения, в которых % берётся не так:
margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.
Единица rem: смесь px и em
Итак, мы рассмотрели:
- px – абсолютные, чёткие, понятные, не зависящие ни от чего.
- em – относительно размера шрифта.
- % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).
Может быть, пора уже остановиться, может этого достаточно?
Э-э, нет! Не все вещи делаются удобно.
Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.
Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?
Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
Следующие кандидаты – em и % .
Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .
Вроде бы, использовать можно, однако есть проблема.
Попробуем использовать этот подход для
.
Многие люди путаются при работе с этими тремя единицами в CSS. Главной причиной этого является отсутствие понимания различий имеющихся между ними.
Для начала нужно усвоить базовое понимание этих единиц:
- Px (пиксель) – это единица измерения величины объектов относительно размера экрана.
- Em – это единица, основанная на размере шрифта родительского элемента (в пикселях).
- Rem – это единица,основанная на размере шрифта корневого элемента html (в пикселях).
Мы можем использовать эти единицы в различных свойствах CSS, таких как font-size , padding , margin , position .
Пиксели представляют собой неделимые объекты прямоугольной или круглой формы, размеры которых зависят от диагонали экрана устройства. Пиксель– это фиксированная единица, которая применяется к отдельным элементам там, где она определяется.
Эта строка кода CSS устанавливает размер шрифта в 10px и отступы размером в 10px со всех сторон.
Единицы измерения em зависят от размера шрифта родительского элемента. Это не фиксированные единицы, поскольку они зависят от базового размера. Когда изменяется размер родительского элемента, меняется и значение em .
Данный код CSS устанавливает размер шрифта в 10px, и отступы толщиной в 100px с каждой стороны, поскольку размер берётся из свойства font-size . В нем каждое значение принимается за 1em, то есть (10px = 1em, поэтому 10em = 10px * 10 = 100px).
Единица измерения rem зависит от размера шрифта, заданного в браузере по умолчанию, или размера шрифта, при именного к элементу html. Если базовый размер меняется, то значение rem также изменяется. Вы можете изменить размер шрифта, используемый по умолчанию, в настройках браузера.
Допустим, размер шрифта, используемый по умолчанию в браузере – 14px.
Этот код установит размер шрифта в 10px и отступы в 140px с каждой стороны. При этом базовым будет размер шрифта по умолчанию, заданный в браузере, который берётся за 1rem. То есть: 14px = 1rem, поэтому 10rem = 14px * 10 = 140px.
Путаница между em и rem
Вопрос, который возникает при использовании этих единиц измерения: «Какие же единицы применять?» Особенно это касается em и rem . Какие элементы установить зависимыми от базового размера,а для каких применять динамические единицы измерения?
- Задача: задать размер элемента относительно размера шрифта, используемого по умолчанию на сайте, там, где не нужно менять размеры. В этом случае “rem” предпочтительнее.
- Чтобы использовать динамические единицы измерения там, где при уменьшении размера шрифта уменьшаются отступы или поля, применяйте “em”.
Вложенные элементы
Для вложенных элементов используется только одна единица измерения – em . Если размеры шрифта или отступов дочернего элемента должны быть наполовину меньше, чем у родительского, тогда используйте em .
Этот код установит размер шрифта родительского элемента в 10px, а шрифт дочернего элемента в 5px.Так как его размер зависит от значения font-size родительского элемента, которое принимается за 1em. То есть:10px = 1em, поэтому 0.5em = 10px / 2 = 5px.
Комбинированный пример
Предположим, что размер шрифта, используемый по умолчанию в браузере,составляет 14px. Как это отразится на всех трёх единицах измерения?
- Размер шрифта = 10px.
- Внутренние поля с каждой стороны (10px = 1em, поэтому 10em * 10px) = 100px.
- Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.
- Размер шрифта (0.5em = 10px / 2) = 5px.
- Внутренние поля с каждой стороны (5px = 1em, поэтому 10em * 5px) = 50px.
- Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.
Ключевым для стилей дочернего элемента является свойство font-size, поскольку оно наследуетсяот родительского элемента.Для него размер шрифта задан в 10px, а в дочернем элементе он установлен в 0.5em. То есть, делится на два (как размер шрифта дочернего элемента).
Поля зависят от размера шрифта текущего элемента. За 1em принимается размер в 5px, (размер шрифта дочернего элемента).
Только отступы постоянны в обоих случаях. Они напрямую наследуются от корневого элемента html. Базовый размер шрифта в 14px неизменен, поэтому поля будут иметь размер 140px в обоих случаях.
Заключение
Чтобы преодолеть эту путаницу в единицах измерения, нужно знать, какие элементы зависят от настроек браузера, а какие основаны на размере экрана пользовательского устройства.
Данная публикация представляет собой перевод статьи « Use of px, em, rem units in css, which one I have to use and when? » , подготовленной дружной командой проекта Интернет-технологии.ру
Дата публикации: 2017-01-30
От автора: споры ведутся уже давно – какие единицы измерения использовать в CSS? Мы, как и многие другие, сначала перешли на REM и потом вернулись к любимым пикселям. Мы просто потеряли тот след, почему мы перешли на REM единицы. Проблема связана не только с размером шрифта, но и с доступностью.
пиксели – это каменный век, не используйте их;
используйте REM для размеров шрифтов и отступов;
используйте EM для медиа запросов.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Пиксели
За все эти годы мы привыкли к пикселям (px). Все знают, что такое пиксель (хотя размер пикселя не всегда одинаковый, но это тема другой статьи). Всем удобно работать с пикселями, их легко переводить. Дизайнеры работают в пикселях, очень удобно брать размеры прямо из Photoshop и переносить их в верстку.
Так что же не так с пикселями?
Доступность
Я большой сторонник доступности в интернете.
Если вы указываете все шрифты, элементы и отступы в пикселях, вы не уважаете конечного пользователя.
В большинстве браузеров пользователь может сменить размер шрифта по умолчанию (обычно это 16px). Если пользователь указал размер шрифта по умолчанию 20px, все шрифты должны увеличиться пропорционально.
Однако если на сайте четко прописан размер шрифта в пикселях, то заголовок размером 30px всегда будет 30px. От дизайнера/разработчика это может звучать круто, но вы не обычный пользователь. Хватит делать сайты для себя.
Если задать размер шрифта в пикселях, это не убьет всю доступность. Пользователь может изменять масштаб с помощью CTRL+/- (на OSX вместо CTRL клавиша CMD). Но можно ведь сделать все лучше.
Единицы измерения REM
Если вы хоть как-то знакомы с миром веб-дизайна, вы точно слышали про единицы измерения REM. Если все же не знаете, REM – это способ указать размер шрифта на основе размера шрифта корневого HTML элемента. С их помощью также можно быстро изменить размеры во всем проекте, поменяв размер шрифта корневого элемента (например, под определенный медиа запрос/размер экрана).
«REM единицы представляют собой размер шрифта корневого элемента (например, размер шрифта тега ). Если использовать эти единицы измерения для указания размера шрифта корневого элемента, вы получите изначальное значение.»
Как перевести REM в PX
Стандартный пример: размер шрифта html задан в 10px, параграф задан в 1,6rem. 1,6rem*10px = 16px.
Самый распространенный сценарий, который я видел, это установка корневого размера шрифта в 10px с помощью REM. Это позволяет легко и быстро переводить одни значения в другие, просто поделив на 10.
Тем не менее, если задать базовый размер шрифта в пикселях, мы получим ту же проблему, что и в примере выше. Доступность.
У REM единиц есть свои способы применения, однако я готов поспорить, что большинство людей используют REM только потому, что они круче пикселей. Я почти не видел реальных проектов, где специально бы изменяли корневой размер шрифта под определенный размер экрана, и это нормально. Если ваш сайт не нагружен множеством шрифтов, вы вряд ли захотите масштабировать все и сразу.
Так как же нам не ломать доступность?
Задайте размер шрифта корневого HTML элемента в процентах. Проценты будут связаны с размером шрифта в браузере по умолчанию. Обычно ставят размер шрифта на 62,5%. 62,5% от 16px (стандартный размер шрифта по умолчанию) составляют 10px. То есть 1,6rem = 16px. Если пользователь поменяет размер шрифта по умолчанию, например, на 20px, то 1,6rem будут равны 20px. Если пользователь хочет шрифты еще больше, пусть ставит. Счастливый дизайнер, счастливый разработчик. Со всеми числами легко работать.
Идеальный вариант – оставить размер шрифта HTML на 100%, но тогда вычисления станут немного сложнее. Например, 16px будут равны 1rem, а 20px станут 1,25rem, 24px превратятся в 1,5rem и т.д.
Sass/SCSS в помощь
Вычислять все эти числа в голове довольно затруднительно и долго. К счастью, вам не следует беспокоиться, если вы используете один из CSS препроцессоров Sass/SCSS, LESS. Все цифры можно вычислять с помощью функций.
А что по поводу EM единиц измерения?
EM единицы работают почти так же, как REM, пока дело не касается вложенности. Мне никогда не нравились EM, особенно когда нужно задавать размер шрифта. Например, возьмем div с размером шрифта 2em, добавим параграф со шрифтом 2em. Размер параграфа теперь 2em относительно div. Я быстро сбиваюсь в вычислениях, где какой размер. Код быстро становится неудобным. Именно эту проблему решает REM – размер всегда привязывается к корневому элементу.
Что по поводу медиа запросов?
Итак, мы установили, что значения в пикселях переписывают значения браузера по умолчанию, поэтому лучший выход – перевести все пиксели в REM, верно? Не совсем.
В этой статье описываются ключевые различия в использовании пикселей, EM и REM в медиа запросах (https://zellwk.com/blog/media-query-units/). Прочитайте ее и возвращайтесь.
В итоге, и пиксели и REM в медиа запросах проигрывают, когда необходимо изменить масштаб в некоторых браузерах. EM в таких случаях становится наилучшим вариантом. REM здесь проигрывают намного больше, чем пиксели, поэтому мы не будем их рассматривать.
Все становится немного сложнее. У EM и пикселей есть свои минусы с медиа запросами, когда дело касается различий значений с плавающей точкой. Если вы используете min и max медиа запросы в одном блоке кода, то вам придется попотеть, когда пользователь начнет менять масштаб браузера или размер шрифта по умолчанию.
Пара примеров:
Мы используем шесть цифр после точки, так как отдельные браузеры не видят разницы межу 2-5 цифрами после точки.
Пример 1: масштаб в браузере установлен в 100%, ширина окна 640px
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
