Tomio25 мар 2016 в 04:30

REM vs EM – Великий спор

12 мин

240K

CSS * HTML *

Перевод

+13

Комментарии 38

winDeD 25 мар 2016 в 07:46

Мое мнение, если нужно чтобы все масштабировалось от font-size — EM
Все остальное в REM

discopalevo 25 мар 2016 в 09:07

Как? У меня есть два простых правила:

Задавай значения в em, если свойства масштабируются относительно font-size;
Во всех остальных случаях задавай значения в rem.

myLizzarD 25 мар 2016 в 09:31

Почти точная цитата из статьи
Как? У меня есть два простых правила:
Задавай значения в em, если свойства масштабируются относительно font-size;
Во всех остальных случаях задавай значения в rem.

izyk 25 мар 2016 в 09:10

Пара вопросов не совсем по теме, если можно.
Почему используется такая конструкция:

media (min-width: 1200px)

почему здесь не используется «rem»?
Можно ли вообще сверстать, использую только «rem/em», в чем преимущества и недостатки?
Спасибо.

winDeD 25 мар 2016 в 09:22

Нужно понимать что REM и EM это относительные единицы на основе px. Можно % \ vw \ vh использовать — браузер поймет от чего считать, но чистые r(em) без px, нельзя. Нужно задать начальные единицы измерения и тогда уже использовать r(em).

izyk 25 мар 2016 в 09:40

izyk 25 мар 2016 в 09:46

У пользователя уже есть, какой-то заданный rem, как правило 16px.

На самом деле, плохая затея устанавливать font-size для html в пикселях (px), так как тем самым мы переопределяем установки браузера пользователя.

Зачем нам его менять? Точнее даже так:
Почему бы не использовать пользовательские установки для задания, в частности, "@media (min-width: 60rem)"?

CoolCmd 25 мар 2016 в 10:50

а есть ли статистика, какой процент людей настраивает размер содержимого страницы выбором шрифта? мне кажется, удобнее использовать масштабирование операционной системы (смена DPI) или масштабирование браузера (например ctrl+ и ctrl-). 16px — это крупновато.

zlob 26 мар 2016 в 06:16

16px — это отлично. Попробуйте на неделю выставить 16px для основного текста на часто посещаемых сайтах. И потом сравните контраст перехода с крупного размера на мелкий. Хороший пример кинопоиск с его 12px основным шрифтом.

juliv 25 мар 2016 в 10:35

Новой версии bootstap используется em вместо px в media запросах: http://v4-alpha.getbootstrap.com/layout/overview/
Думаю, в них можно и rem использовать.

maolo 25 мар 2016 в 13:53

Это статья во многом уже неактуальна — в частности, в медиа запросах они вернулись к пикселям — как пример, github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L6431
Представьте, что Вам нужно создать 2 встречных медиазапроса, например:

media (max-width: 543px) {…

media (min-width: 544px) {…
При относительных единицах точный переход не задать (max — 33.9375em, min — 34em) — при округлении возможны пересечения множеств, и как следствие, получим «поехавшую» верстку.

AndreyBerezhnoy 26 мар 2016 в 09:42

у Foundation в em и всё супер :)

maolo 27 мар 2016 в 04:48

Видимо, не наступили еще на те грабли, которые обнаружили разрабочики бутстрапа.
А, вообще, скажите, какой смысл использовать в медиа запросах ширины экрана величины зависимые от шрифта?
Для печати (media print), наверное, есть смысл, а для экрана, который исключительно в пикселях, зачем?

AndreyBerezhnoy 27 мар 2016 в 09:06

Для корректного отображения страницы, в случае, если установлен нестандартный размер шрифта в браузере, ну и для тех, кто любит пользоваться зумом.
Собственно, какие грабли? :)

maolo 27 мар 2016 в 13:25

В Сафари отлавливается баг при зуме с относительными единицами в медиа запросах.
При встречных запросах возможны как пересечения, так и разрыв при округлении (em'ы будут в любом случае пересчитаны в пиксели) — особенно, если корневой шрифт не 16px, а, например, 14px.

Наткнулся на свежую статью на эту тему — http://zellwk.com/blog/media-query-units/ — возможно, мне стоит пересмотреть свой взгляд на эту проблему.
С другой стороны, не просто так же бутстрап вернулся к пикселям (не нашел обоснования этому, наверное, из-за Сафари).

AndreyBerezhnoy 27 мар 2016 в 13:48

Да, видимо в Сафари все же есть трабла. Ну, не зря же его называют "Новым IE" :)

inoyakaigor 25 мар 2016 в 09:27

По мне так rem надо использовать ещё и для замены px. Правда, тут всплывают две проблемы: часто приходится пересчитывать пиксели в ремы руками и браузеры по разному считают одни и те же значения рема если оно маленькое (типа 0.0625 и т.п.). Например если использовать rem как размер бордера, то можно подобрать такие значения, при которых Хром будет давать жирную полоску, а Лис тонкую однопиксельную (необходимость и/или правильность такого применения давайте оставим за кадром).

discopalevo 25 мар 2016 в 09:35

https://github.com/cuth/postcss-pxtorem

inoyakaigor 25 мар 2016 в 10:20

Не всегда и не везде это имеет смысл (и возможность) использовать.

Murmurianez 25 мар 2016 в 12:55

Вот у Вас стоит font-size: 10px. Вопрос: если писать адекватные размеры в rem — с точностью до десятых (1.1rem, 1.3rem...) проблема с непонятными размерами где-нибудь всплывает? Или я вас не понял?

ImKremen 25 мар 2016 в 13:27

Если у HTML стоит "font-size: 10px" нет смысла использовать rem.

Murmurianez 25 мар 2016 в 20:47

Ровно до того момента как вспомнишь зачем его вообще изобрели.

ImKremen 28 мар 2016 в 10:45

И зачем его изобрели?

Murmurianez 28 мар 2016 в 12:12

Чтобы сделать зависимость размеров элементов от размера корневого элемента. 10px идёт лишь за базу вёрстки основного макета, для остальных размеров мы меняем эти 10px с помощью media-query на необходимые.

ImKremen 28 мар 2016 в 13:27

Дело в том что в реальности, очень часто, размеры шрифтов для разных брейкпоинтов нужно изменять не строго пропорционально.
Для многих элементов шрифт и вовсе может не меняет размеры, например кнопки.

inoyakaigor 25 мар 2016 в 16:57

Честно говоря 10px никогда не ставил, да и цифра эта магическая, потому, что является основанием нашей системы счёта, поэтму с ней по-умолчанию проблем не будет. А вот если отталкиваться от дефолтных 16px, тогда… К тому же точность до десятых явно мала. Если вы загляните в большие css фреймворки (напр. Zurb Foundation), то обнаружите там, что везде используются em'ки с точностью до 4 знака, а проценты так вовсе до пятого.

Murmurianez 25 мар 2016 в 20:43

А чем плохо использовать значение с которым по-умолчанию проблем не будет?
Ну, как я вижу, есть смысл делать так: html font-size: 10px, body font-size: 16px — и овцы целы и волки сыты. Думал даже над font-size: 1px чтоб вообще можно было px на rem автоматически поменять, но нашёл какой-то кейс где 10 удобнее.
А в Foundation есть rem-calc, который избавляет от всех этих проблем и из которого и получаются все вот эти числа до 4 знака. Хотя я бы предпочёл чтоб там просто в html 10px стояло.

inoyakaigor 26 мар 2016 в 12:54

Мне кажется тут возможны проблемы в адаптивной вёрстке из-за разной плотности пикселей на смартфонах.

CoolCmd 22 фев 2018 в 00:14

Думал даже над font-size: 1px чтоб вообще можно было px на rem автоматически поменять, но нашёл какой-то кейс где 10 удобнее.

одну причину я знаю. если в настройках браузера прописан минимальный размер шрифта, например 8px, то размер элементов будет просто гигантским. кстати, в теории минимальный размер шрифта можно задать больше 10px. :)

Olegatro 25 мар 2016 в 09:27

Отличный материал, спасибо за перевод.

Tomio 25 мар 2016 в 09:30

На здоровье =)

Afadeev 25 мар 2016 в 10:29

А разве не на хабре или фронтендере была статья, что на экранах пиксели, и лучше все делать в процентах и пикселях? Масштабировать шрифты современные браузеры умеют и в px. em ведет себя непредсказуемо, особенно в дочерних элементах, и я лучше вручную через media queries пропишу размеры в px. И не буду сидеть с калькулятором, высчитывая очередной размер в em. Давно решил отказаться от em/rem и еще не было ни одного случая, который заставил бы меня передумать. Использование em в media queries приводит к появлению нахлеста. К сожалению, сейчас под рукой нет пруфлинков. Считаю, что с приходом адаптивности em/rem уже не актуальны.

dom1n1k 25 мар 2016 в 11:04

Да по большому счету, px и rem — это эквивалентные по своей работе единицы (с учетом того, что px почти наверняка умножаются-пересчитываются где-то в препроцессоре). И rem-ы тут выступают чем-то типа синтаксического сахара. Чуть более семантично, чуть более удобно, если рутовый размер шрифта меняется медиа-запросами.
Если же сайт не адаптивный, разницы вообще практически нет. Можно и пиксели.
А вот %, имхо, на сегодняшний день имеют смысл только для размеров блоков (сетка). Для размеров шрифтов и всех зависящих от него единиц — про проценты можно забыть вообще.

ImKremen 25 мар 2016 в 11:30

ИМХО rem&em имеют право на жизнь в чистой типографике (онлайн-ридеры, статьи в блогаг/новостях и т.п). Для интерфейсов пиксели.

Ivaseg 25 мар 2016 в 15:31

pxtoem.com и не нужен калькулятор для расчетов

Afadeev 25 мар 2016 в 15:35

По-вашему, это не онлайн калькулятор? С табличкой часто используемых размеров шрифтов, как таблица умножения в школе =)

fetis26 2 янв 2017 в 15:54

Это кажется что пиксели везде одинаковые, на самом деле нет. CSS имеет дело с виртуальным пикселем, которые потом уже конвертируется в физические пиксели устройства и сколько их будет зависит от дейвайса и его разработчиков.

Этим-то rem и хороши. Они отвязывают от девайса и заставляют думать в категориях здесь у меня шрифт 1.4 единицы, здесь отступ 2 единицы.

romandev411 7 фев 2018 в 14:46

Видно, что никто не умеет правильно пользоваться этими единицами.
Точно так же как и DRY в верстке приравнивают к недублированию кода.
px → em
rem → em
БЛОК(px/rem) → ЭЛЕМЕНТ(em)

Для адаптивности на мелких экранах можно
html(vw) rem → em

Зарегистрируйтесь на Хабре, чтобы оставить комментарий