Комментарии 38
Мое мнение, если нужно чтобы все масштабировалось от font-size — EM
Все остальное в REM
Все остальное в REM
Как? У меня есть два простых правила:
Задавай значения в em, если свойства масштабируются относительно font-size;
Во всех остальных случаях задавай значения в rem.
Почти точная цитата из статьи
Как? У меня есть два простых правила:
Задавай значения в em, если свойства масштабируются относительно font-size;
Во всех остальных случаях задавай значения в rem.
Как? У меня есть два простых правила:
Задавай значения в em, если свойства масштабируются относительно font-size;
Во всех остальных случаях задавай значения в rem.
Пара вопросов не совсем по теме, если можно.
Почему используется такая конструкция:
Можно ли вообще сверстать, использую только «rem/em», в чем преимущества и недостатки?
Спасибо.
Почему используется такая конструкция:
media (min-width: 1200px)почему здесь не используется «rem»?
Можно ли вообще сверстать, использую только «rem/em», в чем преимущества и недостатки?
Спасибо.
Нужно понимать что REM и EM это относительные единицы на основе px. Можно % \ vw \ vh использовать — браузер поймет от чего считать, но чистые r(em) без px, нельзя. Нужно задать начальные единицы измерения и тогда уже использовать r(em).
-
У пользователя уже есть, какой-то заданный rem, как правило 16px.
Почему бы не использовать пользовательские установки для задания, в частности, "@media (min-width: 60rem)"?
На самом деле, плохая затея устанавливать font-size для html в пикселях (px), так как тем самым мы переопределяем установки браузера пользователя.Зачем нам его менять? Точнее даже так:
Почему бы не использовать пользовательские установки для задания, в частности, "@media (min-width: 60rem)"?
Новой версии bootstap используется em вместо px в media запросах: http://v4-alpha.getbootstrap.com/layout/overview/
Думаю, в них можно и rem использовать.
Думаю, в них можно и rem использовать.
Это статья во многом уже неактуальна — в частности, в медиа запросах они вернулись к пикселям — как пример, 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) — при округлении возможны пересечения множеств, и как следствие, получим «поехавшую» верстку.
Представьте, что Вам нужно создать 2 встречных медиазапроса, например:
media (max-width: 543px) {…
media (min-width: 544px) {…
При относительных единицах точный переход не задать (max — 33.9375em, min — 34em) — при округлении возможны пересечения множеств, и как следствие, получим «поехавшую» верстку.
у Foundation в em и всё супер :)
Видимо, не наступили еще на те грабли, которые обнаружили разрабочики бутстрапа.
А, вообще, скажите, какой смысл использовать в медиа запросах ширины экрана величины зависимые от шрифта?
Для печати (media print), наверное, есть смысл, а для экрана, который исключительно в пикселях, зачем?
А, вообще, скажите, какой смысл использовать в медиа запросах ширины экрана величины зависимые от шрифта?
Для печати (media print), наверное, есть смысл, а для экрана, который исключительно в пикселях, зачем?
Для корректного отображения страницы, в случае, если установлен нестандартный размер шрифта в браузере, ну и для тех, кто любит пользоваться зумом.
Собственно, какие грабли? :)
Собственно, какие грабли? :)
- В Сафари отлавливается баг при зуме с относительными единицами в медиа запросах.
- При встречных запросах возможны как пересечения, так и разрыв при округлении (em'ы будут в любом случае пересчитаны в пиксели) — особенно, если корневой шрифт не 16px, а, например, 14px.
Наткнулся на свежую статью на эту тему — http://zellwk.com/blog/media-query-units/ — возможно, мне стоит пересмотреть свой взгляд на эту проблему.
С другой стороны, не просто так же бутстрап вернулся к пикселям (не нашел обоснования этому, наверное, из-за Сафари).
По мне так rem надо использовать ещё и для замены px. Правда, тут всплывают две проблемы: часто приходится пересчитывать пиксели в ремы руками и браузеры по разному считают одни и те же значения рема если оно маленькое (типа 0.0625 и т.п.). Например если использовать rem как размер бордера, то можно подобрать такие значения, при которых Хром будет давать жирную полоску, а Лис тонкую однопиксельную (необходимость и/или правильность такого применения давайте оставим за кадром).
Вот у Вас стоит font-size: 10px. Вопрос: если писать адекватные размеры в rem — с точностью до десятых (1.1rem, 1.3rem...) проблема с непонятными размерами где-нибудь всплывает? Или я вас не понял?
Если у HTML стоит "font-size: 10px" нет смысла использовать rem.
Честно говоря 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 стояло.
Ну, как я вижу, есть смысл делать так: 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 имеют право на жизнь в чистой типографике (онлайн-ридеры, статьи в блогаг/новостях и т.п). Для интерфейсов пиксели.
pxtoem.com и не нужен калькулятор для расчетов
Это кажется что пиксели везде одинаковые, на самом деле нет. CSS имеет дело с виртуальным пикселем, которые потом уже конвертируется в физические пиксели устройства и сколько их будет зависит от дейвайса и его разработчиков.
Этим-то rem и хороши. Они отвязывают от девайса и заставляют думать в категориях здесь у меня шрифт 1.4 единицы, здесь отступ 2 единицы.
Видно, что никто не умеет правильно пользоваться этими единицами.
Точно так же как и DRY в верстке приравнивают к недублированию кода.
px → em
rem → em
БЛОК(px/rem) → ЭЛЕМЕНТ(em)
Для адаптивности на мелких экранах можно
html(vw) rem → em
Точно так же как и DRY в верстке приравнивают к недублированию кода.
px → em
rem → em
БЛОК(px/rem) → ЭЛЕМЕНТ(em)
Для адаптивности на мелких экранах можно
html(vw) rem → em
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
REM vs EM – Великий спор