Destio небольшой блог

Размеры в CSS: em, rem или пиксели, 2016

em

В стародавние времена, хайвмайнд интернетов, мучаясь кривостью internet explorer (да и вообще “браузерами” тех времен), породил традицию задавать размеры шрифта в em. Традиция быстро породила хардкорную версию, когда все размеры задаются в em. Это подкреплялось множеством статей от гуру, которые объясняли в чем опасности использования пикселей и как все хорошо если все размеры относительны, можно менять размер шрифта каждый день, меняя все остальные блоки тоже. Еще можно встретить аргументы в пользу слепых людей, которые меняют размер шрифта и у них сползает дизайн (аргументы от любителей устанавливать основной шрифт 0.5em).

И по сей день в тредах “в чем мерять ксс” отвечают в основном гордые относительноционисты.

Эта величина оторвана от реальности, потому что рендерится все равно будет в пикселях, глаз будет видеть пиксели, картинки в пикселях, JavaScript выдаст .width в пикселях, и все это добро нужно переводить в em и обратно, получая занятные дробные величины. Ну, можно и пищевую ценность в электронвольтах считать. Наверное кто-нибудь и считает.

У em есть забавная особенность из-за его относительности: если размер шрифта списка задан в em, то у вложенных списков он будет уже em*em, и т.д. Поэтому появился rem.

rem

Это тоже самое что и em, только размеры не относительно родительского блока, а относительно самого корневого html. В результате он хорошо работает с вложенными объектами, например списки перестанут расползаться. Ну и не работает в браузерах прошлого века (а у них вообще ничего не работает).

px

Долгое время обижаемая единица. Хотя на самом деле 1/96 дюйма (в печати или всяких high-dpi), или просто 1 пиксель (в других местах) вполне себе хорошо рендерится и масштабируется. Особенно хорошо на мониторах с 96dpi. Также это самая близкая к конечному результату единица.

Эпилог

Как-то раз недавно утром я поглядел на пару блоков с размерами, заданными в em, да вот те же окошки поиска в хидере и на главной странице. Там 4 блока одинаковой высоты, которые в 4х браузерах (Chrome Linux/Windows, Firefox Linux/Windows) рендерились тремя разными способами, в результате чего input и submit отличались по высоте на +-1 пиксель. Я не знаю какое колдунство там, под капотом, округляет кривые em в кривые пиксели, но оно работает плохо, так что пошли бы они к чертям. Я ухожу к пикселям.

Конвертация значений

1 поинт = 0.3528 мм
1 пиксель = 0.26 мм
1 пиксель = 0.737 поинт
1 поинт = 1.357 пиксель


Ближайшие сообщения:

Похожие сообщения:

Комментарии к этой записи отключены.