BonBonSlick
@BonBonSlick
WebDev - vanilla edition

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

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

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

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы