BonBonSlick
@BonBonSlick
Vanilla Full Stack Web Architector

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

Иные вроде: mm ... не рассматрвиаем.
1 - vh + vw
2 - %
3 - em
4 - rem
5 - px
6 - ex
7 - ch
  • Вопрос задан
  • 5412 просмотров
Решения вопроса 1
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
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 для типографских выкрутасов.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
HamSter007
@HamSter007
HTML/CSS верстальщик
em \rem очень удобно!
1 - vh + vw - поддержка браузерами еще не очень, но универсальные
Ответ написан
@twoDolphins
em/rem для размера шрифтов
% для ширины блоков и отступов
vh + vw в особых случаях
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы