Вход Регистрация
ruen

Какие единицы измерения CSS выбрать. Что лучше, проценты, пиксели, em и т.д.

css-units

При разработке сайта активно используются таблицы каскадных стилей CSS. В них применяются различные единицы измерения, среди которых пиксели, проценты, дюймы и т.д. Перед разработчиком в процессе верстки страницы сайта часто встает вопрос, какие единицы применить.

Действительно, для чего в CSS так много единиц измерения? Это сделано для удобства и гибкости. Разработчик может самостоятельно применять нужные единицы измерения исходя из задачи. Часто можно заметить, как бездумно на всем сайте используется только одна единица измерения, выбранная из каких-либо соображений. Это неверный подход, использовать единицы измерения нужно исходя из ситуации.

Какие единицы измерения существуют в CSS? Все единицы измерения можно разделить на две большие категории: относительные и абсолютные. Относительные единицы определяют размер элемента относительно значения другого размера, а абсолютные не зависят от устройства вывода.

Относительные единицы чаще применяют для работы с текстовым контентом или, когда нужно вычислить процентное соотношение между элементами. В относительные входят:

  • Высота шрифта текущего элемента (em),
  • Высота буквы x (ex),
  • Пиксели (px),
  • Проценты (%).

Что касается абсолютных единиц измерения, то они применяются реже, чем относительные. В абсолютные единицы измерения входят:

  • Дюйм, 1 дюйм равен 2,54 см (in),
  • Сантиметр (cm),
  • Миллиметр (mm),
  • Пункт, 1 пункт равен 1/72 дюйма (pt),
  • Пика, 1 пика равна 12 пунктам (pc).

Теперь, когда рассмотрели единицы измерения и их группы, разберемся какие единицы где использовать. Стоит помнить, что выбор единиц измерения зависит также от устройства вывода, например, экран или печать. Для экрана рекомендуются следующие: em, px, %. Для печати можно использовать: em, cm, mm, in, pc, pt, %. Например, при верстке страницы, ширину блоков можно задавать в процентах, высоту в пикселях, размер текста в em или пикселях. Таким образом, какие единицы измерения CSS выбрать, решает сам разработчик, исходя из потребностей.

Комментарии (0)
Для комментирования войдите или зарегистрируйтесь.

Последние статьи

Популярные разделы

Общение

Вход в веб-версию
Приложение для Android:
Доступно в Google Play

Поделиться

Подписаться

YouTube