Можно ли использовать единицы измерения rem (root em) вообще для всего в CSS?

Приветствую.
Много читал в сети про единицы измерения rem, но до конца кажется не понял. Пишут, что в основном rem используют для:
- font-size
- line-height
- padding и margin текстовых блоков и только для них, по крайней мере так советуют. В спецификации W3C толком ничего не написано, две паршивых строчки.

Можно ли использовать rem для отступов блока друг от друга или для внешних отступов лучше использовать единицы типа PX или % или rem СТРОГО для текста и прилагающихся к нему padding и margins? EM даже не хочу использовать, одна головная боль от них с их наследованием. Старые браузеры особо не беспокоят, поэтому выбор пал на rem.

К примеру, задать тегу html размер шрифта в один пиксель и использовать rem - так можно или не нужно и почему?

Могли бы подробно разъяснить как, для чего, когда и пр. использовать rem?
  • Вопрос задан
  • 4122 просмотра
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Можно ли использовать rem для отступов блока друг от друга

Зачем? Значение в rem нужно для гарантированного получение базового размера. Между тем текстовые блоки наследуют размер шрифта, и для этого используются проценты, em.

К примеру, задать тегу html размер шрифта в один пиксель и использовать rem - так можно или не нужно и почему?

Ну это за гранью добра и зла:) Указывая размер шрифт в :root (он же html), вы задаёте точку отсчёта для наследования body и всех остальных элементов. Для какой задачи вам вообще может потребоваться базовый размер в 1 пиксель?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Делаю вот так:
html, body {
  font-size: 62.5%; // 1rem = 10px и никакой попаболи как с EM
}

И верстаю все только в rem уже более полугода (за исключение тонких бордеров в 2-3px и подобных микро-вещей, которые при снижении font-size для html, body могут выдавать становиться тоньше, чем надо).
Главная фишка - возможность скейлить всю верстку под разные разрешения. Хочется сделать все на 25% больше для мониторов шире 1600px? Просто пишешь:
html, body {
  @media (min-width: 1600px) {
    font-size: 78.125%;
  }
}

И вся верстка магическим образом идеально скейлится. Тоже самое касается и понижения, очень удобно в адаптивной верстке.
Недостатки у rem есть, но они безобидные для нормальных людей - ie9+ и баг с небольшой неточностью приема 62.5% в каких-то версиях ie (вроде как в 10), что в общем то не заслуживает внимания.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы