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

Question

[notveganmustdie]

Никак не могу понять какие меры измерения использовать в адаптивной верстке и где.
Например для размера шрифта я использую rem, а задавая ширину блокам где удобно использую проценты. А как задавать паддинги и маргины? Можно использовать пиксели или в адаптиве это табу и тоже везде прописывать через rem? В разных видеоуроках делают по разному и это вводит меня в заблуждение) Выручайте, проясните ситуацию)
И еще по поводу медиа-запросов. Обычно я начинаю со стандартного размера и сужаю ширину окна, как только что-то едет пишу медиазпрос чтобы это поправить. В итоге получается много разных запросов, но выглядит хорошо при любом размере. Обычно делается так или как-то иначе?

Answer 1

[Евгений Петров]

1. Всё зависит от макетов, реализованных для разных размеров viewport, и комментариев дизайнера. В каких-то блоках отступы могут зависеть от размера шрифта, в каких-то от ширины блока, а где-то оставаться стационарными.

2. Используя в качестве единицы величины кегля rem, вы игнорируете возможность наследования от родителя. При этом каскад рассчитывается ровно столько же, и вы не получаете увеличение скорости построения CSSOM. Вот вам простой пример — в блоке есть 2 элемента, величина кегля для первого должна быть в 2 раза больше второго, для которого размер кегля должен быть в 1.5 раза больше, чем у родителя.

HTML

<div class="sample">
	<div class="sample-one">Text</div>
	<div class="sample-two">Text</div>
</div>

CSS

.sample-one {
	font-size: 3em;
}
.sample-two {
	font-size: 1.5em;
}

Изменяя размер кегля родительского блока, я всегда получаю нужный результат. А, в случае привязки к rem, я буду вынужден менять размер в 3-х элементах. А если таких вложений будет 10?

3. Все media queries работают по принципу if. Каждый будет проверен на соответствие и, в случае положительного результата, применяются описанные в блоке правила с учётом специфичности и порядка.

Answer 2

[Иван]

Либо em, либо проценты. И не забывайте про функцию calc в CSS, она очень помогает вычислять размеры