vikipavlin23
@vikipavlin23
"Наверстываю" упущенное

Какие используете единицы измерения при верстке?

Маленькая предыстория: 3 года не подходила к компьютеру верстать от слова совсем, потому что находилась в декретном отпуске и была уверена, что не буду заниматься этим делом опять. Но как встал вопрос о работе, поняла, что все равно манит меня веб разработка. Сейчас пытаюсь въезжать в изменения, произошедшие за мой длительный отпуск.

И вот собственно заметила, что многие используют em и rem. Я конечно по старинке юзаю px или %. Подскажите где бы разобраться что правильно применять и в каких случаях? И как с этими em/rem работать? Постоянно считать на калькуляторе? или я что-то не понимаю
  • Вопрос задан
  • 458 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Какие используете единицы измерения при верстке?

Подходящие!
Для решения разных задач используются разные единицы измерения

примеры

1. Размер шрифта удобно писать в px, em и rem.
Если он фиксированный, то это px.
Если зависит от настроек пользователя, то rem. Для html задают font-size: 62.5%, для body font-size: 1.6rem в итоге для стандартных настроек получают изначальные 16px, но для удобства расчетов в этом случае 1rem=10px.
Если размер шрифта зависит от размера шрифта родителя, то используют em, например, заголовок должен быть в 1.2 раза крупнее текста. h1{font-size: 1.2em}
А может быть мне нужен адаптивный шрифт, чтобы на всех экранах слово занимало всю ширину, тогда vw vh

2. Границы. Обычно толщина границ не зависит от шрифта или размеров блоков, значит, px
border: 1px

3. Блоки.
У блоков могут быть разные зависимости.
Например, четверть родителя -> проценты %
Или фиксированная -> px
Или зависит от ширины/высоты вьюпорта -> vw vh
Или зависит от шрифта -> ch (Ширина символа 0 в шрифте текущего элемента.)

4. Отступы.
Могут зависеть от шрифта, могут быть % от ширины блока или фиксированными в px.

Это не все варианты, все мне, наверное, так сразу и не перечислить
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@vardoLP
Ват ю сэй эбаут май мама?!
я вообще никогда не заморачиваюсь и всегда использую только px и % никаких проблем не возникает, уже 7 лет :)
Ответ написан
@coderxx
keep calm and learn js
html {font-size: 62.5%;}
h1 {font-size: 2.4rem;}
p {font-size: 1.4rem;}
Ответ написан
@Vlobik
HTML / CSS / BOOTSTRAP / MODX / Photoshop
Для адаптива рекомендуется использовать rem. Они также просты в использовании, в отличии от em, где нужно помнить в голове значение родителя. Разумеется человек запутается. А с rem все просто:
html { 
    font-size: 100% /* =16px */
}
body {
    font-size: 1rem; /* =16px */
}
Ответ написан
@Arik
Если работать с sass bootstrap 4, то уже работать с rem, т.к. там расчеты идут с ними
Ответ написан
Ваш ответ на вопрос

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

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