em vs. px vs. pt vs. percent / Habr
Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.Знакомьтесь — единицы
1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
Итак, в чем же разница?
Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.
Изменение Font-size от 100% до 120%.
Как вы можете видеть, «em» и «%» увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и «%» предпочтительнее в использовании для текста веб-документа.
«em» vs «%»
Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и «%». В теории, единицы «em» и «%» являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.
Размер шрифта, когда клиент изменяет размер текста в браузере.
Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и «%». Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем «%», а при установке «Largest» наоборот «em» отображается гораздо большим, чем «%». И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.
Вердикт
В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в «%» позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в «%» изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.
habr.com
Чем отличаются px от em
Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
В этой статье я хочу попытаться разобраться чем же отличаются px от em. Итак.
px (пиксели)
Это самая базовая, абсолютная и окончательная единица измерения.
Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
Пиксели могут быть дробными, например размер можно задать в 16.5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей-неволей появляются 33.333...px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
Достоинства
Главное достоинство пикселя – чёткость и понятность
Недостатки
Проблема использования пикселей заключается в том, что IE считает пиксели абсолютным значением и не масштабирует текст, с размером шрифта, указанным в пикселях. Поэтому принято использовать em. Задание размеров блоков в em позволяет создавать масштабируемый дизайн, изменяющийся в зависимости от размера шрифта.
Принято использовать для задания размеров блоков.
em (вычисляемая единица)
Значения указанные в em, ведут отсчет от базового размера шрифта браузера (16px), т.е. по умолчанию 1em=16px. Для удобства использования em, базовый размер шрифта сначала сбрасывают до 10px, когда 1em=10px, а 0,1em=1px. Для сброса базового размера шрифта используйте следующее правило:
body { font-size: 62.5%; }
body { font-size: 62.5%; }
|
И учитывайте, если для какого-то блока будет указан размер шрифта, например, 1.6em, то все его потомки за базовое значение будут брать уже не 10px, а 16px(1.6em). Для удобства расчета значений размера шрифтов в em’ах можно использовать вот этот сервис.
Принято использовать для задания размеров текста и/или блоков.
Достоинства
- Очень удобно и быстро меняются размеры всего.Если мы меняем значение элемента то каскадно поменяются все дочерние элементы.
- Если нужно, то дочерние элементы можно переопределить как обычно, в пикселях.
- Это очень удобно для изменения размера программно. Например, пользователь может изменить их в настройках.
- Очень удобно, и сохраняется качество шрифта при масштабировании размеров страницы.
- Случается так, что пользователи переопределят размер шрифты через браузер. Использование
em.
позволяет посетителю видеть и использовать масштабируемый текст при любом разрешении и на любом устройстве.
Недостатки
- Браузеры округлят не целое значение размера , что не сказывается при больших размерах, но на маленьких деталях можно увидеть неточность.
- В случае наследование значения em тоже наследуется, это может принести не мало хлопот.
- Конфликтует с препроцессорами(То есть,после компиляции не получиться динамически поменять значение
em). - При использовании transform: scale() элементы перекрывают друг друга.
Таблица соотношений px, pt, em %
| Пункт, pt | Единица, em | Процент,% | |
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
Похожие записи
codernote.ru
em, px, pt, cm, in…
См. также оглавление со всеми советами.
На этой странице:
em, px, pt, cm, in…
Указывать длину в CSS можно в разных единицах. Некоторые из них
пришли из типографской традиции, как пункт (pt)
и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном
обиходе. Есть и «волшебная» единица, придуманная специально для
CSS: px. Значит ли это, что для разных свойств нужны
разные единицы?
Нет, единицы измерения не имеют отношения к свойствам, но имеют прямое отношение к средствам отображения: экран или бумага.
Любые единицы измерения можно использовать где угодно. Свойство
со значением в пикселях (margin: 5px) также
допускает и значения в дюймах или сантиметрах (margin:
1.2in; margin: 0.5cm), и наоборот.
Но в целом для отображения на экране и для печати лучше использовать разные наборы единиц измерения. Советы по использованию единиц собраны в следующей таблице:
| Рекомендуются | Можно иногда | Не рекомендуются | |
|---|---|---|---|
| Экран | em, px, % | ex | pt, cm, mm, in, pc |
| Печать | em, cm, mm, in, pt, pc, % | px, ex |
Соотношение между абсолютными единицами таково: 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 не только одинаково выглядит независимо от устройства,
но и заведомо измеряется одной и той же величиной (совсем как
единицы cm, 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: h2
{font-size: 2.5em}, чтобы h2 был в 2½ раза крупнее
основного шрифта страницы.
Едиственное место, где можно использовать pt (либо cm или in) для размера
шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт
был строго определенного размера. Но даже там чаще всего лучше
использовать размер шрифта по умолчанию.
Таким образом, единица px избавляет
от необходимости знать разрешение устройства. Независимо
от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или
1800 dpi), длина, указанная в виде целого числа px,
всегда выглядит хорошо и везде достаточно похоже. Но что, если
мы хотим узнать разрешение устройства, например, чтобы
решить, можно ли использовать линию в 0.5px?
Выход — проверить разрешение с помощью медиавыражений.
Подробности о медиавыражениях — за рамками этой статьи, но вот
небольшой пример:
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 и h2 одинаковый внешний отступ слева, вот для сравнения
CSS-код до 2013 года:
p { margin-left: 1em }
h2 { font-size: 3em; margin-left: 0.333em }и новая версия:
p { margin-left: 1rem }
h2 { font-size: 3em; margin-left: 1rem }Благодаря другим новым единицам стало можно указывать размеры
относительно окна пользователя. Это vw и vh. Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin,
соответствующая меньшему из vw и vh.
И vmax (можете догадаться, что она делает).
Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.
www.w3.org
Единицы измерения в CSS — px, pt, em % – Андрей Шарапов
Давно уже ищу информацию в интернете информацию о соотношении единиц измерения, таких как 0.75em= px? или Чему равен 1em?. Вот отличная табличка. Еще существует такое значение как Rem, но его в табличке пока нет.
Pixels
Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
Points
Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т. д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
Ems
«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т. д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
Percents
Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).
Как показала практика, использование em или % удобнее чем пункты и пиксели.
Таблица соотношений
| Пункт, pt | Пиксель, px | Единица, em | Процент,% |
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
Остались вопросы? Задавайте их в комментариях.
Возможно Вас также заинтересует…
madeas.ru
css — Что такое размер шрифта em? Сколько это в пикселях? — Qaru
What is an EM?
Wikipedia puts it well: If your font-size is at 16 pixels, then 1em = 16px
For more information visit Wikipedia and Mozilla MDN.
What is the text sizing difference between PX, EM, %, PT?
Pixels and points are static measurements, but commonly used in different mediums. Pixels are used on screens because screens are measured in pixels. Although points can be used on screen, they are the standard in printing because they are a factor of DPI.
Percent and EMs on the other hand are relative measurements. The size of an EM or percentage unit depends on its parent. If body text is sized at 12 pixels, then text set at 120% or 1.2 EM inside the body will be 1.2 * 12, or 14.4 pixels.
How do I convert between PX, EM, %, and PT?
Assuming you aren’t using PXtoEM.com to keep it simple, here are the formulas PXtoEM.com uses.
Note: 16px is used as the body text size in all conversions because that is the browser default. You will change 16px to your base text size.
- PX to EM
- Formula: size in pixels / parent size in pixels
- Example: 12px / 16px = .75em
- PX to %
- Formula: size in pixels / parent size in pixels * 100
- Example: 12px / 16px * 100 = 75%
- PX to PT
- Formula: size in pixels * (points per inch / pixels per inch)
- Example: 16px * (72pt / 96px) = 12pt
- EM to PX
- Formula: size in EMs * parent size in pixels
- Example: .75em * 16px = 12px
- EM to %
- Formula: size in EMs * 100
- Example: .75em * 100 = 75%
Why size your text with EMs in CSS?
Style sheets that use EMs are easier to maintain for the designer (especially with PXtoEM.com at your side) and more accessible to end-users.
Style sheets become easier to maintain because all text set in EMs scale to the body font-size.
Единицы измерения: «px», «em», «rem» и другие
Only one element\’s font-size needs to change instead of individually changing the font-size of each element.
Accessibility is increased for end-users because text is scaled based on their preferences rather than set statically in pixels. Additionally, end-users can use hot keys to scale the text in all browsers. Many people have difficulty reading small text on a computer screen.
For more information visit A List Apart, informIT, Jon Tan\’s Blog, and this SharePoint Blog.
This site uses Blueprint CSS to generate your yummy CSS.
What is PXtoEM.com?
PXtoEM.com is px to em conversion made simple. Choose your body font size in pixels (px)and out comes a complete pixel (px) to em conversion table, making elastic web design with CSS a snap. The once daunting challenge of converting pixels (px) to the elusive em has now been reduced to a booger eating pipsqueak. Thanks, PXtoEM.com!
PXtoEM.com takes it a step further and gives CSS to start with! After you select your body font size, go to «Get CSS» and there you go!
PXtoEM.com was created by Brian Cray
steptosleep.ru
Сила единицы измерения em в CSS
При работе с CSS всегда наступает такой момент, когда начинаешь понимать, насколько мощным является то или иное его средство. Несмотря на то, что я довольно хорошо понимаю единицу измерения em CSS, по-настоящему прочувствовал их силу только после того, как прочитал запись Simurai. В этой статье я собираюсь использовать его опыт.
В 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 в CSS всегда наследует значение размера шрифта корневого элемента независимо от вычисленного размера шрифта. В HTML корневым является элемент <html>. Таким образом можно использовать rem. Но это означает, что вы должны будете управлять всеми компонентами на странице, используя размер шрифта этого элемента. Это может сработать в некоторых проектах, но я думаю, что этот метод лучше всего работает при изменении размеров отдельного компонента, а не всего документа.
Что касается использования препроцессора Sass, то это уже второстепенный вопрос. В итоге CSS будет использовать любые единицы измерения, которые указаны в Sass коде, и наследование будет работать таким же образом.
Я считаю, что это хороший метод для использования при создании CSS-фреймворка или библиотеки компонентов. Этот метод убедительно доказывает, насколько мощным средством является единица измерения em в CSS.
Данная публикация представляет собой перевод статьи «The Power of em Units in CSS» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
EM, REM или PX – почему нельзя использовать «только пиксели»
От автора: споры ведутся уже давно – какие единицы измерения использовать в 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
Узнать подробнееmin-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss
min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss |
Пример 1б: масштаб в браузере установлен в 100%, ширина окна 639px
min-width: 64em = Miss max-width: 63.99em = Hit max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Hit max-width: 639.999999px = Hit
min-width: 64em = Miss max-width: 63.99em = Hit max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Hit max-width: 639.999999px = Hit |
Нельзя использовать 6 цифр после точки для EM, это запускает оба медиа запроса. Пример 2: масштаб в браузере установлен в 110%, ширина окна 704px (так как 640px*110% = 704px)
min-width: 64em = Miss max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Miss max-width: 639.999999px = Hit
min-width: 64em = Miss max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Miss max-width: 639.999999px = Hit |
Пример 2б: масштаб в браузере установлен в 110%, ширина окна 705px
min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Miss min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss
min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Miss min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss |
Мы не можем использовать две цифры после точки для EM. Нам осталось использовать 6dp. Это работает с зумом в браузерах. Однако… Пример 3: масштаб в браузере установлен в 100%, размер шрифта 20px, ширина окна 800 (640*125% = 800)
min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit
min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit |
И опять, 6dp для EM использовать нельзя. Нельзя использовать пиксели для медиа запросов, так как они запускают оба запроса 640px/639px, потому что игнорируются EM/REM.
Какой же выход?
К сожалению, ответа нет. Пока браузеры не решат проблемы с округлением, вы в западне. Простейший выход – не создавать min-width и max-width в одном блоке. Пример:
body { @media screen and (max-width: 63.99em) { background: blue; } @media screen and (min-width: 64em) { background: blue; } }
body { @media screen and (max-width: 63.99em) { background: blue; }
@media screen and (min-width: 64em) { background: blue; } } |
Проблема с кодом выше заключается в том, что есть сценарии, когда будут запущены или проигнорированы оба медиа запроса. Так что лучше всего писать что-то такое:
body { background: blue; @media screen and (min-width: 64em) { background: blue; } }
body { background: blue;
@media screen and (min-width: 64em) { background: blue; } } |
Почему не существует реального решения? Мне кажется, люди особо об этом не думают. Любая статистика, где говорится, что люди не меняют размер шрифта в браузере по умолчанию, искажает правду. Опция по изменению размера шрифта в Chrome похоронена в продвинутых настройках.
Ловушки
У данного подхода есть несколько ловушек:
если вы привыкли писать min-width и max-width медиа запросы в одном блоке кода, то вам придется ждать еще дольше;
возрастает сложность, так как вам придется переписать CSS в одну из сторон, вместо того, чтобы просто сказать браузеру, чтобы тот использовал вариант А или B;
возрастает размер файла из-за перезаписей, несильно, но это стоит учесть.
В зависимости от проекта, кто его разрабатывает и таких факторов, как бюджет (нужно быть реалистами), пиксели будут намного проще и быстрее. Намного проще и быстрее игнорировать доступность.
Помните, для кого вы создаете сайты. Проблемы, затронутые в этом посте, актуальны на момент написания, однако постоянные обновления браузеров могут оставить их в прошлом.
Источник: http://engageinteractive.co.uk/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотретьwebformyself.com