Что такое px, em, rem в CSS
Многие люди путаются при работе с этими тремя единицами в CSS. Главной причиной этого является отсутствие понимания различий имеющихся между ними.
Для начала нужно усвоить базовое понимание этих единиц:
- Px (пиксель) – это единица измерения величины объектов относительно размера экрана.
- Em – это единица, основанная на размере шрифта родительского элемента (в пикселях).
- Rem – это единица,основанная на размере шрифта корневого элемента html (в пикселях).
Мы можем использовать эти единицы в различных свойствах CSS, таких как font-size , padding , margin , position .
Что такое Px
Пиксели представляют собой неделимые объекты прямоугольной или круглой формы, размеры которых зависят от диагонали экрана устройства. Пиксель– это фиксированная единица, которая применяется к отдельным элементам там, где она определяется.
Эта строка кода CSS устанавливает размер шрифта в 10px и отступы размером в 10px со всех сторон.
Em
Единицы измерения em зависят от размера шрифта родительского элемента. Это не фиксированные единицы, поскольку они зависят от базового размера. Когда изменяется размер родительского элемента, меняется и значение em .
Данный код CSS устанавливает размер шрифта в 10px, и отступы толщиной в 100px с каждой стороны, поскольку размер берётся из свойства font-size . В нем каждое значение принимается за 1em, то есть (10px = 1em, поэтому 10em = 10px * 10 = 100px).
Rem
Единица измерения rem зависит от размера шрифта, заданного в браузере по умолчанию, или размера шрифта, при именного к элементу html. Если базовый размер меняется, то значение rem также изменяется. Вы можете изменить размер шрифта, используемый по умолчанию, в настройках браузера.
Допустим, размер шрифта, используемый по умолчанию в браузере – 14px.
Этот код установит размер шрифта в 10px и отступы в 140px с каждой стороны. При этом базовым будет размер шрифта по умолчанию, заданный в браузере, который берётся за 1rem. То есть: 14px = 1rem, поэтому 10rem = 14px * 10 = 140px.
Путаница между em и rem
Вопрос, который возникает при использовании этих единиц измерения: «Какие же единицы применять?» Особенно это касается em и rem . Какие элементы установить зависимыми от базового размера,а для каких применять динамические единицы измерения?
- Задача: задать размер элемента относительно размера шрифта, используемого по умолчанию на сайте, там, где не нужно менять размеры. В этом случае “rem” предпочтительнее.
- Чтобы использовать динамические единицы измерения там, где при уменьшении размера шрифта уменьшаются отступы или поля, применяйте “em”.
Вложенные элементы
Для вложенных элементов используется только одна единица измерения – em . Если размеры шрифта или отступов дочернего элемента должны быть наполовину меньше, чем у родительского, тогда используйте em .
div.parent < font-size: 10px; >div.parent div.child
Этот код установит размер шрифта родительского элемента в 10px, а шрифт дочернего элемента в 5px.Так как его размер зависит от значения font-size родительского элемента, которое принимается за 1em. То есть:10px = 1em, поэтому 0.5em = 10px / 2 = 5px.
Комбинированный пример
Предположим, что размер шрифта, используемый по умолчанию в браузере,составляет 14px. Как это отразится на всех трёх единицах измерения?
div.parent < font-size: 10px; padding: 10em; margin: 10rem;>div.parent div.child
- Размер шрифта = 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 в обоих случаях.
Заключение
Чтобы преодолеть эту путаницу в единицах измерения, нужно знать, какие элементы зависят от настроек браузера, а какие основаны на размере экрана пользовательского устройства.
Единицы измерения: px, em, rem и другие
В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.
Пиксели: px
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.
Достоинства
- Главное достоинство пикселя – чёткость и понятность
Недостатки
- Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами
Давно на свалке: mm , cm , pt , pc
Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.
Вот, если интересно, их значения:
- 1mm (мм) = 3.8px
- 1cm (см) = 38px
- 1pt (типографский пункт) = 4/3 px
- 1pc (типографская пика) = 16px
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
Почему в сантиметре cm содержится ровно 38 пикселей?
В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.
Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.
Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.
Относительно шрифта: em
1em – текущий размер шрифта.
Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.
Размеры в em – относительные, они определяются по текущему контексту.
Например, давайте сравним px с em на таком примере:
Страусы Живут также в Африке 24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в одинаков.
А вот аналогичный пример с em вместо px :
Страусы Живут также в Африке Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.
Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
Что такое размер шрифта?
Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.
Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
Единицы ex и ch
В спецификации указаны также единицы 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, %, VW, VH, VMIN, VMAX, FR, EX, CH
Абсолютная единица — не зависит от значений других свойств. Ее можно назвать еще фиксированной или окончательной.
Относительная единица — зависит от того или иного значения других свойств.
PX — пиксели
Абсолютная (фиксированная) единица. Значение заданное в пикселях (px), четкое и понятное.
Как правило, в макетах дизайна мы видим размеры именно в пикселях. Поэтому, используя эту единицу мы легко можем переносить данные в код с точностью пиксель перфект. Это когда макетные размеры совпадают с версткой на все 100%.
Остальные единицы, так или иначе пересчитываются браузером все равно в пиксели.
Пиксели могут быть дробными, например размер можно задать в 16.5px.
( i ) Размер шрифта браузера по умолчанию 16px
( i ) Свойство font-size наследуется потомками
Обычный текст Привет! Это Фрилансер по жизни! Живи, а работай в свободное время! Подписывайся! Ставь лайк! И комментарий напиши! Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 20px;)
Живи, а работай в свободное время! (задан font-size: 17.5px;)
Подписывайся! (наследует font-size: 17.5px;)
Ставь лайк! (задан font-size: 14.7px;)
И комментарий напиши! (задан font-size: 25px;)
width: 200px;
height: 200px;
padding: 15px;
Преимущества
Чёткость, понятность, простота использования.
Подходит для начинающих.
Недостатки
По сравнению с другими, относительными единицами это усложняет нам работу при адаптиве, а также снижает доступность нашей верстки, запрещая пользователю менять настройки в браузере
EM – относительна размеру шрифта
Относительная единица. Размер формируется относительно текущего или унаследованного размера шрифта (font-size).
1em равен значению font-size.
Как мы знаем, свойство размера шрифта font-size наследуется потомками. Поэтому, указывая тот или иной размер в EM нужно четко понимать какой размер шрифта влияет на данный элемент.
Как и пиксели, значение EM можно указывать дробные.
( i ) Размер шрифта браузера по умолчанию 16px
( i ) Свойство font-size наследуется потомками
Обычный текст Привет! Это Фрилансер по жизни! Живи, а работай в свободное время! Подписывайся! Ставь лайк! И комментарий напиши! Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 1em; 1*16=16px)
Живи, а работай в свободное время! (задан font-size: 1.5em; 1.5*16 = 24px)
Подписывайся! (наследует font-size: 1.5em; 1.5*16 = 24px)
Ставь лайк! (задан font-size: 1.5em; 1.5*24 = 36px)
И комментарий напиши! (задан font-size: 0.8em; 0.8*24=19.2px)
Размер шрифта
по умолчанию 16px
width: 12.5em;
height: 12.5em;
padding: 0.9375em;
0.9375 * 16 = 15px
Размер шрифта
задан 20px (font-size:20px;)
width: 12.5em;
height: 12.5em;
padding: 0.9375em;
font-size: 20px;
0.9375 * 20 = 18.75px
Преимущества
Относительность EM позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Отлично подходит для указания размеров зависящих от размера шрифта. Также используется в медиа запросах.
Недостатки
по сравнению с PX, работать с EM более сложно, ведь для переноса данных из макета в единицы в EM требуются вычисления.
REM — относительна размеру шрифта браузера
Относительная единица. Размер формируется относительно размера шрифта (font-size) в теге или браузера по умолчанию.
1rem равен значению font-size в теге или браузера по умолчанию.
Можно указывать дробные числа, например 1.5rem
( i ) Размер шрифта браузера по умолчанию 16px
( i ) Свойство font-size наследуется потомками
Обычный текст Привет! Это Фрилансер по жизни! Живи, а работай в свободное время! Подписывайся! Ставь лайк! И комментарий напиши! Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 1rem; 1*16=16px)
Живи, а работай в свободное время! (задан font-size: 1.5rem; 1.5*16 = 24px)
Подписывайся! (наследует font-size: 1.5rem; 1.5*16 = 24px)
Ставь лайк! (задан font-size: 1.5rem; 1.5*16 = 24px)
И комментарий напиши! (задан font-size: 0.8rem; 0.8*16=12.8px)
Размер шрифта
по умолчанию 16px
width: 12.5rem;
height: 12.5rem;
padding: 0.9375rem;
0.9375 * 16 = 15px
Размер шрифта
задан 20px (font-size:20px;)
width: 12.5rem;
height: 12.5rem;
padding: 0.9375rem;
font-size: 20px;
0.9375 * 16 = 15px
Преимущества
Относительность REM позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Более простое использование. Отлично подходит для указания размеров шрифтов.
Недостатки
По сравнению с PX, работать с REM более сложно, ведь для переноса данных из макета в единицы в REM требуются вычисления, но проще чем с EM.
% — проценты от .
Относительная единица. Можно указывать дробные числа, например 10.5%. Разные CSS свойства вычисляют процент относительно разных значений:
- Ширина width — относительно ширины родительного элемента
- Высота height — относительно высоты родительного элемента, но только если у него задана высота либо это флекс или грид элемент.
- При относительном позиционировании (position: relative; + top left bottom right) нужны те же условия.
- Для абсолютно позиционированных объектов — относительно высоты родительского элемента. При этом, задавать высоту родителю не обязательно.
- Отступы padding \ margin — относительно ширины родительного элемента, даже если задаются вертикальные отступы.
- transform: translate(x, y) — относительно ширины \ высоты самого объекта к которому применено свойство.
- font-size и line-height — относительно размера свойства font-size
( i ) Размер шрифта браузера по умолчанию 16px
( i ) Свойство font-size наследуется потомками
Обычный текст Привет! Это Фрилансер по жизни! Живи, а работай в свободное время! Подписывайся! Ставь лайк! И комментарий напиши! Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 100%; 16/100*100=16px)
Живи, а работай в свободное время! (задан font-size: 150%; 16/100*150=24px)
Подписывайся! (наследует font-size: 150%; 16/100*150=24px)
Ставь лайк! (задан font-size: 150%; 24/100*150=36px)
И комментарий напиши! (задан font-size: 80%; 24/100*80=19.2px)
Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 50%;
height: 50%;
padding: 5%;
margin: 5%;
Ширина: 400/100*50 = 200px
Высота: 300/100*50 = 150px
Внутренние отступы: 400/100*5 = 20px
Внешние отступы: 400/100*5 = 20px
Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 50%;
height: 70%;
padding: 5%;
position: relative;
left: 10%;
top: 5%;
Ширина: 400/100*50 = 200px
Высота: 300/100*70 = 210px
Внутренние отступы: 400/100*5 = 20px
Вправо: 400/100*10 = 40px
Вниз: 300/100*5 = 15px
Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 70%;
height: 50%;
padding: 5%;
transform: translate(10%, 5%);
Ширина: 400/100*70 = 280px
Высота: 300/100*50 = 150px
Внутренние отступы: 400/100*5 = 20px
Вправо: 280/100*10 = 28px
Вниз: 150/100*5 = 7.5px
Преимущества
Относительность процентов позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Отлично подходит для построения относительных конструкций и позиционирования объектов.
Недостатки
Требуют хорошего знания теории и четкого понимания — процент от чего вычислятестя в тот или иной момент
VW, VH, VMIN, VMAX — относительно окна (вьюпорта) браузера
Все они так или иначе работают относительно окна браузера, так называемого вьюпорта.
Вьюпорт, простыми словами, это вот эта рамка через которую мы просматриваем сайт.
Итак VW работает относительно ширины вьюпорта, VH относительно высоты вьюпорта.
VMIN — относительно наименьшего значения из (VW, VH). VMAX — относительно наибольшего значения из (VW, VH).
100vw равно ширине окна браузера (вьюпорта), 100vh равно высоте окна браузера (вьюпорта).
100wmin равно наименьшему из (vw, vh), 100vmax равно наибольшему из (vw, vh)
( i ) Размер шрифта браузера по умолчанию 16px
( i ) Свойство font-size наследуется потомками
Обычный текст Привет! Это Фрилансер по жизни! Живи, а работай в свободное время! Подписывайся! Ставь лайк! И комментарий напиши! Таблицы стилей для веба Советы и хитрости по 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 и т.д.
Используйте em или px для шрифтов
Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt , пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt , ни других абсолютных единиц, а использовать только em и px .
Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:
0.5pt, 1px, 1pt, 1.5px, 2px
Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).
Волшебная единица CSS, px , часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.
Но размеры шрифтов еще лучше задавать в em . Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em : H1 , чтобы H1 был в 2½ раза крупнее основного шрифта страницы.
Едиственное место, где можно использовать pt (либо cm или in ) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.
div.mybox < border: 2px solid >@media (min-resolution: 2dppx) < /* Media with 2 or more dots per px */ div.mybox < border: 1.5px solid >>
Новые единицы измерения в CSS
Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem . Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em , который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и H1 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:
p < margin-left: 1em >h1
p < margin-left: 1rem >h1
Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh . Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin , соответствующая меньшему из vw и vh . И vmax (можете догадаться, что она делает).
Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.
Навигация по сайту
Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy
Created 12 Jan 2010;
Last updated Ср 06 янв 2021 05:40:49