Pull to refresh

Comments 38

Мое мнение, если нужно чтобы все масштабировалось от font-size — EM
Все остальное в REM
Как? У меня есть два простых правила:

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

Почти точная цитата из статьи
Как? У меня есть два простых правила:
Задавай значения в em, если свойства масштабируются относительно font-size;
Во всех остальных случаях задавай значения в rem.
Пара вопросов не совсем по теме, если можно.
Почему используется такая конструкция:
media (min-width: 1200px)
почему здесь не используется «rem»?
Можно ли вообще сверстать, использую только «rem/em», в чем преимущества и недостатки?
Спасибо.
Нужно понимать что REM и EM это относительные единицы на основе px. Можно % \ vw \ vh использовать — браузер поймет от чего считать, но чистые r(em) без px, нельзя. Нужно задать начальные единицы измерения и тогда уже использовать r(em).
У пользователя уже есть, какой-то заданный rem, как правило 16px.
На самом деле, плохая затея устанавливать font-size для html в пикселях (px), так как тем самым мы переопределяем установки браузера пользователя.
Зачем нам его менять? Точнее даже так:
Почему бы не использовать пользовательские установки для задания, в частности, "@media (min-width: 60rem)"?
а есть ли статистика, какой процент людей настраивает размер содержимого страницы выбором шрифта? мне кажется, удобнее использовать масштабирование операционной системы (смена DPI) или масштабирование браузера (например ctrl+ и ctrl-). 16px — это крупновато.
16px — это отлично. Попробуйте на неделю выставить 16px для основного текста на часто посещаемых сайтах. И потом сравните контраст перехода с крупного размера на мелкий. Хороший пример кинопоиск с его 12px основным шрифтом.
Это статья во многом уже неактуальна — в частности, в медиа запросах они вернулись к пикселям — как пример, 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) — при округлении возможны пересечения множеств, и как следствие, получим «поехавшую» верстку.
Видимо, не наступили еще на те грабли, которые обнаружили разрабочики бутстрапа.
А, вообще, скажите, какой смысл использовать в медиа запросах ширины экрана величины зависимые от шрифта?
Для печати (media print), наверное, есть смысл, а для экрана, который исключительно в пикселях, зачем?
Для корректного отображения страницы, в случае, если установлен нестандартный размер шрифта в браузере, ну и для тех, кто любит пользоваться зумом.
Собственно, какие грабли? :)
  1. В Сафари отлавливается баг при зуме с относительными единицами в медиа запросах.
  2. При встречных запросах возможны как пересечения, так и разрыв при округлении (em'ы будут в любом случае пересчитаны в пиксели) — особенно, если корневой шрифт не 16px, а, например, 14px.

Наткнулся на свежую статью на эту тему — http://zellwk.com/blog/media-query-units/ — возможно, мне стоит пересмотреть свой взгляд на эту проблему.
С другой стороны, не просто так же бутстрап вернулся к пикселям (не нашел обоснования этому, наверное, из-за Сафари).
Да, видимо в Сафари все же есть трабла. Ну, не зря же его называют "Новым IE" :)
По мне так rem надо использовать ещё и для замены px. Правда, тут всплывают две проблемы: часто приходится пересчитывать пиксели в ремы руками и браузеры по разному считают одни и те же значения рема если оно маленькое (типа 0.0625 и т.п.). Например если использовать rem как размер бордера, то можно подобрать такие значения, при которых Хром будет давать жирную полоску, а Лис тонкую однопиксельную (необходимость и/или правильность такого применения давайте оставим за кадром).
Не всегда и не везде это имеет смысл (и возможность) использовать.
Вот у Вас стоит font-size: 10px. Вопрос: если писать адекватные размеры в rem — с точностью до десятых (1.1rem, 1.3rem...) проблема с непонятными размерами где-нибудь всплывает? Или я вас не понял?
Если у HTML стоит "font-size: 10px" нет смысла использовать rem.
Ровно до того момента как вспомнишь зачем его вообще изобрели.
Чтобы сделать зависимость размеров элементов от размера корневого элемента. 10px идёт лишь за базу вёрстки основного макета, для остальных размеров мы меняем эти 10px с помощью media-query на необходимые.
Дело в том что в реальности, очень часто, размеры шрифтов для разных брейкпоинтов нужно изменять не строго пропорционально.
Для многих элементов шрифт и вовсе может не меняет размеры, например кнопки.
Честно говоря 10px никогда не ставил, да и цифра эта магическая, потому, что является основанием нашей системы счёта, поэтму с ней по-умолчанию проблем не будет. А вот если отталкиваться от дефолтных 16px, тогда… К тому же точность до десятых явно мала. Если вы загляните в большие css фреймворки (напр. Zurb Foundation), то обнаружите там, что везде используются em'ки с точностью до 4 знака, а проценты так вовсе до пятого.
А чем плохо использовать значение с которым по-умолчанию проблем не будет?
Ну, как я вижу, есть смысл делать так: html font-size: 10px, body font-size: 16px — и овцы целы и волки сыты. Думал даже над font-size: 1px чтоб вообще можно было px на rem  автоматически поменять, но нашёл какой-то кейс где 10 удобнее.
А в Foundation есть rem-calc, который избавляет от всех этих проблем и из которого и получаются все вот эти числа до 4 знака. Хотя я бы предпочёл чтоб там просто в html 10px стояло.
Мне кажется тут возможны проблемы в адаптивной вёрстке из-за разной плотности пикселей на смартфонах.
Думал даже над font-size: 1px чтоб вообще можно было px на rem автоматически поменять, но нашёл какой-то кейс где 10 удобнее.
одну причину я знаю. если в настройках браузера прописан минимальный размер шрифта, например 8px, то размер элементов будет просто гигантским. кстати, в теории минимальный размер шрифта можно задать больше 10px. :)
А разве не на хабре или фронтендере была статья, что на экранах пиксели, и лучше все делать в процентах и пикселях? Масштабировать шрифты современные браузеры умеют и в px. em ведет себя непредсказуемо, особенно в дочерних элементах, и я лучше вручную через media queries пропишу размеры в px. И не буду сидеть с калькулятором, высчитывая очередной размер в em. Давно решил отказаться от em/rem и еще не было ни одного случая, который заставил бы меня передумать. Использование em в media queries приводит к появлению нахлеста. К сожалению, сейчас под рукой нет пруфлинков. Считаю, что с приходом адаптивности em/rem уже не актуальны.
Да по большому счету, px и rem — это эквивалентные по своей работе единицы (с учетом того, что px почти наверняка умножаются-пересчитываются где-то в препроцессоре). И rem-ы тут выступают чем-то типа синтаксического сахара. Чуть более семантично, чуть более удобно, если рутовый размер шрифта меняется медиа-запросами.
Если же сайт не адаптивный, разницы вообще практически нет. Можно и пиксели.
А вот %, имхо, на сегодняшний день имеют смысл только для размеров блоков (сетка). Для размеров шрифтов и всех зависящих от него единиц — про проценты можно забыть вообще.
ИМХО rem&em имеют право на жизнь в чистой типографике (онлайн-ридеры, статьи в блогаг/новостях и т.п). Для интерфейсов пиксели.
По-вашему, это не онлайн калькулятор? С табличкой часто используемых размеров шрифтов, как таблица умножения в школе =)

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


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

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

Для адаптивности на мелких экранах можно
html(vw) rem → em
Only those users with full accounts are able to leave comments. Log in, please.