Относительные единицы измерения в CSS

Доброго времени суток уважаемый читатель. Сегодня мы коротко обсудим такое понятие, как относительные единицы измерения  с CSS и для чего они применяются. Самой распространенной величиной измерения в CSS является пиксель (px), но какие последствия у использования только пиксельной системы измерения величины? Начнем пожалуй с того, что размер пикселя может быть разным и зависит это от размера и типа монитора. Также на мониторах можно установить разрешение отличающейся от реального и пиксель будет на столько мал, что не разлечим. Еще одним не маловажным минусом является усложнение при разработке адаптивных или отзывчивых сайтов. Сегодня мы расмотрим :

  • относительные еденицы измерения
  • их отличия и своства
  • плюсы и минусы

Относительные единицы измерения

Существует несколько относительных едениц:

  • em
  • ex
  • px
  • %

При чем «%» — величина о которой следует написать отдельную статью. Она важна на столько что W3C вынес ее в отдельную колонку.

Давайте начнем с пикселей(px), о которых мы говорили ранее. Они являются относительной величиной так как нет такой физической меры. Пиксель образуется в результате работы видеокарты, которая в свою очередь обрабатывает входные данные, которые могут быть разными, и его размер напрямую зависит от монитора и разрешения.

Следующими единицами мы расмотрим  «em» и «ex». em — высота шрифта используемого пользователем на компьютере по умолчанию. ex — высота используемой буквы «х» в используемом шрифте по умолчанию. Что же это все значит расмотрим ниже.

Большинство браузеров понимают значение «ex» как половина значения «em». У каждого шрифта есть своя базовая линия, заглавные буквы и некоторые уникальные прописные буквы, которые выступают за базовую линию, к примеру «у». Есть еще буквы с диакрическими знаками, такие как «ё» и «й». По этому высота шрифта «em» определяется выносными элементами. в то время как «ex» определяется строчными буквами которые находятся в рамках базовой линии.

И так процент. Далеко не все правила в CSS могут задаваться в процентах. Дабы не переписывать уже существующий материал предлагаю ознакомиться со таблицей на официальном сайте W3C . Если напротив правила в колонке «Persentages» ничего не написано, значит для этого правила измерение в процентах недоступно. Для остальных же, в этой колонке будут объяснения о том как именно будет отрабатывать процентная единица.

Один комментарий для “Относительные единицы измерения в CSS

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *