Вход Регистрация
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)
Для комментирования войдите или зарегистрируйтесь.
Оставить заявку

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

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

Eqsash (Инструменты)

Приложение для Android - VK LAST USER ID, отучитель от зависимости и т.д.:
Доступно в Google Play

Amessage (Общение)

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

Поделиться

Подписаться

YouTube

Книги

IT-заметки - Простым языком о самом нужном (HTML, CSS, JavaScript, PHP, базы данных, Drupal, Битрикс, SEO, домены, безопасность и другое), PDF, 500 стр.