BonBonSlick
@BonBonSlick
Vanilla Full Stack Web Architector

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

Иные вроде: mm ... не рассматрвиаем.
1 - vh + vw
2 - %
3 - em
4 - rem
5 - px
6 - ex
7 - ch
  • Вопрос задан
  • 8448 просмотров
Решения вопроса 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 в особых случаях
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
НТЦ РОСТ Москва
от 150 000 до 250 000 руб.
от 100 000 до 130 000 руб.
19 нояб. 2019, в 10:04
1000 руб./в час
19 нояб. 2019, в 09:43
20000 руб./за проект
19 нояб. 2019, в 09:42
20000 руб./за проект