Маленькая предыстория: 3 года не подходила к компьютеру верстать от слова совсем, потому что находилась в декретном отпуске и была уверена, что не буду заниматься этим делом опять. Но как встал вопрос о работе, поняла, что все равно манит меня веб разработка. Сейчас пытаюсь въезжать в изменения, произошедшие за мой длительный отпуск.
И вот собственно заметила, что многие используют em и rem. Я конечно по старинке юзаю px или %. Подскажите где бы разобраться что правильно применять и в каких случаях? И как с этими em/rem работать? Постоянно считать на калькуляторе? или я что-то не понимаю
Подходящие! Для решения разных задач используются разные единицы измерения
примеры
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.
Это не все варианты, все мне, наверное, так сразу и не перечислить
Виктория Зголич,
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.
Это не все варианты, все мне, наверное, так сразу и не перечислить
Vergellan, 1. прямоугольник не может быть размером 200px, потому что у прямоугольника 4 стороны
2. размер бумаги не измеряется в пикселях
3. читайте литературу, link, и не выставляйте себя идиотом
Vergellan, Владислав Лысков девочки, не ссорьтесь, понятное дело вы имеете в виду разную относительность, пиксили это относительные размеры к реальным размерам изображения, емы к размерам дисплея устройства.
Владислав Лысков, пока идиотом выставляете себя вы, поскольку даже не читаете что пишет вам собеседник.
Абсолютность величины измерения обуславливается не тем что она через что-то выражается а тем что она может быть отражена на десятке-сотне «зоопарка» устройств. Пиксель может быть разным как по физическим параметрам - dot pitch, так и по параметрам разрешения экрана ppi.
Поэтому например первоначальное значение условного дюйма в 72 ppi для ранних макинтошей было оправданным: размеры матрицы монитора делали его близким к физическому дюйму, а эппловский ImageWriter принтер имел ровно вдвое бо́льшую разрешающую способность в 144 dpi. Таким образом, 1 пиксель на экране составлял (примерно) один типографский пункт, 72 пикселя условного дюйма легко переводились в 1 дюйм физический на принтере, а текст, набранный 12-ю пикселями на экране Macintosh давал ци́церо при печати.
P/S/ да, и для тех кто прогуливал математику - квадрат является частным случаем прямоугольника.
Для адаптива рекомендуется использовать rem. Они также просты в использовании, в отличии от em, где нужно помнить в голове значение родителя. Разумеется человек запутается. А с rem все просто:
html {
font-size: 100% /* =16px */
}
body {
font-size: 1rem; /* =16px */
}
где задается, что у html font-size: 100% = 16px? А как потом при верстке адаптива, они меняются относительно ширины/высоты экрана? А вдруг не будет совпадать с размером в макете?
А как потом при верстке адаптива, они меняются относительно ширины/высоты экрана? А вдруг не будет совпадать с размером в макете?
А это уже Вам стоит почитать мануалы использования rem) Сразу ссылки на статьи не найду, если подвернется - напишу.
От себя добавлю в пример bootsrap 4 который не зря перешел в rem.
