CSS em rem % вопросы по относительным еденицам — что лучше...и как?

Question

[Дмитрий]

Пытаюсь разобраться с основами отзывчивого веб-дизайна. Вопросы по относительным единицам. Пожалуйста не посылайте в гугл - я его перечитал за два дня - поясните, пожалуйста, на пальцах поподробнее...
1) Чем отличаются проценты и em в задании размера шрифта? Если одинаковы, то почему em а не проценты?
2) em пишут что каскадно наследуется (в таблицах по принципу геометрической прогрессии) и берется от родителя. А проценты ведут себя также?
3) почему не использовать rem, он ведь отталкивается только от одного размера html{font-size}?
4)зачем прописывают body{font-size:100%}, если боди итак унаследует настройки броузера по умолчанию (для нормального шрифта 16 рх к примеру)?
5) в некоторых статьях пишут что в em можно задавать отступы (маргины, паддинги и бордюры), но эта тема плохо раскрыта. Как вообще тогда их рассчитывать при верстке макета?
6) Многие пишут что современные броузеры прекрасно масштабируют пиксели. А относительные единицы в современном респонсиве не нужны? так ли это? где истина?
7)при изменении настроек в виндоусе на крупный как будут себя вести шрифты и отступы в em, rem и % ?
8) Приму любые прочие советы по использованию относительных размеров...

Answer 1

[Сергей delphinpro]

Ankhena W достаточно подробно все описала, но кое-что следует уточнить.

1. Проценты и em это всё-таки разные единицы измерения. Для каких-то свойств они ведут себя одинаково (в частности font-size), для каких-то - по-разному. Например, при задании line-height процент высчитывается от размера шрифта текущего элемента, а em от размера шрифта родителя.

2. То же самое. Зависит от свойства, к которому применяется.

3. Можно использовать (и используют), но не всегда это нужно. Допустим, элемент small должен быть всегда меньше на 25% где бы он не находился. Чем писать правила на все случаи его появления в верстке, проще написать одно правило - font-size: 0.75em;

4. Неточность у автора. body наследует не настройки браузера, а свойства рутового элемента html, который как раз и задается настройками браузера (по умолчанию).

5. Отступы в em удобно задавать при описании типографики, но не блоков. Например, для заголовков, параграфов и т.п. Вообще, если описывать всю типографику относительными единицами, ее легко, буквально в пару правил, адаптировать под разные экраны.

И по всему остальному: истины нет. Неожиданно, да? Тем не менее это похоже на правду. Всё зависит от конкретных обстоятельств. Где-то удобнее использовать одно, где-то другое. И прекрасно, что CSS дает нам такую возможность.

Comments

[qbStOne]

Все замечательно, кроме интерлиньяжа (line-height). Вы ошиблись: проценты будут себя вести так же, как и em.
Для line-height есть еще одно значение — "множитель", т.е. просто число, которое умножается на размер шрифта текущего элемента.
Ситуация, которую вы описали возможна только, если элементу задан размер шрифта, а line-height не задан, но у родительского блока он есть. В таком случае и %, и em будут уже просчитаны в родительском блоке и элемент унаследует фактическое значение. В случае, если line-height родителя задан просто множителем, то элемент унаследует множитель и рассчитает line-height со своим размером шрифта.
Пример для наглядности: https://jsfiddle.net/pwvhj6a3/

[Сергей delphinpro]

qbStOne: благодарю за уточнение.

Answer 2

[Ankhena]

1. Для шрифта: ничем. Просто кто-то любит %%, а кто-то десятичные дроби.
Для других свойств: см. ответ Сергей

2. Без разницы.
Если написано td {font-size: 0.5em}, а таблицы вложенные, то каждая следующая будет брать половинный размер шрифта своего родителя, а значит на каждом следующем шаге уменьшаться вдвое. С %% аналогично.

3. Каждый выбирает как ему удобнее считать. Оба варианта пересчитывается из одного в другой.

4. Мой знакомый программист в таких случаях отвечал "для надежности". Это лишнее.

5. Это скорее вопрос дизайнерам занимающимся типографикой. Какие правильные красивые отступы должны быть у текста и его окружения.
Размер в em при этом задается для сохранения пропорций при изменении шрифта.

6. Истина в макете дизайнера :)
Для разных целей разные решения.

7. Смотрите сайты на разных устройствах. Представляйте себя молодым и резвым или слепенькой старушкой. Всем удобно? Отлично.

Answer 3

[itsjustmypage]

3) Потому что это практически никогда никому не нужно. Есть ещё нужда для поддержки изменения базового размера шрифта в браузере пользователя - если он поставит в настройках 150%, чтобы все шрифты отталкивались от этого размера. Но опять же, это не слишком частоиспользуемая возможность, к тому же вероятно, что верстка поедет. Сейчас все пользуются обычным масштабированием, не спрятанным глубоко в настройках браузера, а масштабирование от rem единиц не зависит и верстку обычно не ломает.

4) Насколько я знаю, это писали из-за бага в IE6/7. Сечас в этом нет смысла.

5) Всё отличие отступов и размеров в px против em лишь в том, что последние зависят от размера текста. Это удобная техника для масштабирования элементов, достаточно лишь увеличить размер текста, как отступы увеличатся пропорционально тексту. Однако нужно понимать где лучше использовать em, где rem, а где просто px. Вот неплохая статья на эту тему https://zellwk.com/blog/rem-vs-em/

6) Относительные единицы нужны, но это не панацея. Сами px являются относительной единицей по сути, поскольку являются CSS-пикселями, зависят от плотности экрана и не равны физическим пикселям на экране. Проценты существуют для резиновой верстки (сетки с колонками по 25% ширины родителя, например), вьюпорт-единицы (vh, vw, vmin, vmax) нужны, когда нужно ориентироваться на размеры экрана (полноэкранный сайт, резиновые размеры шрифта и т.д.), rem и em для зависимости от размера текста. Если никакие из этих зависимостей не нужны, просто используй пиксели.

Answer 4

[Максим Тимофеев]

Вы забыли про vh, vw и rem. Которые в последнее время набирают популярность.