1. Размеры шрифта и полей для всех текстовых элементов (вся типографика: заголовки, абзацы и т.д.) задавать в
em. Чтобы их можно было легко масштабировать и при этом сохранялись пропорции отступов (смотри пункт 4).
1.1. Для заголовков в качестве прогрессивного улучшения можно дополнительно задать размер шрифта в
vw. Посмотрите пример —
codepen.io/paulradzkov/pen/jqYqgY
vw и vh уже достаточно широко поддерживаются (
caniuse.com/#search=vw), если вы не верстаете для Китая.
2. Размеры элементов форм (инпуты, кнопки), их поля и иногда бордеры задавать в
em. Чтобы они были одного масштаба с окружающим их текстом. А также смотри пункт 4.
3. Ширину колонок модульной сетки, сайдбаров и прочих layout-элементов в общем случае задавать в
%.
3.1. Если ширина чего-либо зависит от своего контента, а не от ширины вьюпорта, то лучше использовать
rem* или верстать через flex, не задавая ширину явно.
3.2. Отступы layout-элементов, гуттер между колонками — в
rem*. Иногда по дизайну нужно задавать в
%.
4. Размер шрифта крупных модулей лучше задавать в
rem*. Например, мы пишем:
.promo {
font-size: 1.2rem;
}
.sidebar {
font-size: 0.8rem;
}
Благодаря тому, что у нас пункты 1) и 2) в em-ах, шрифты и формы в промо блоке и в сайдбаре изменятся разом в 1.2 и 0.8 раз. При этом, если засунуть .promo внутрь .sidebar, размер шрифта промо-блока всё равно останется в 1.2 раза больше дефолтного текста. Т.е. не зависит от контекста.
5. Для @media-выражений рекомендуют использовать
em, потому что раньше в браузерах был баг (вроде все уже пофиксили), когда пользователь масштабировал страницу (
ctrl +
± или
ctrl +
scroll), появлялась нежелательная горизонтальная прокрутка. Я всегда писал в
px и никогда с такими багами не сталкивался.
6. Если вы хотите масштабировать сайт целиком, то через @media-выражения можно менять размер шрифта элементу html — в
px. Тогда все, что было задано в rem и em отреагирует на это изменение.
* — если вы не меняете и не планируете менять размер шрифта html-элемента, то везде вместо
rem можно смело писать
px. Ничего не изменится.
Все остальные единицы измерения используются в частных случаях. Для печати могут понадобиться
mm или
pt; для высоты фиксированных элементов —
vh;
ex и
ch для типографских выкрутасов.
