От автора: в CSS каждое свойство должно иметь какое-то значение. Иногда это путь, иногда цвет, иногда строка, а иногда единица измерения. Сегодня мы говорим о единицах CSS для измерения длины, ширины и высоты элемента.
Есть много CSS единиц, которые могут быть использованы для измерения, например: px, em, rem, vh, vw и т.д. Мы можем разделить все эти единицы на две группы: абсолютные единицы и относительные единицы.
1. Абсолютные единицы CSS
Абсолютные единицы одинаковы на любом устройстве, независимо от его размера и настроек. В зависимости от цели нашего дизайна мы можем использовать разные единицы. Поскольку они не масштабируются с размером устройства, абсолютные единицы CSS не подходят для адаптивного дизайна, но отлично подходят для печати.
px
px обозначает пиксель, а визуальный размер пикселя зависит от разрешения и качества экрана. Таким образом 16px, визуально не на каждом экране имеет одинаковый размер. Например, возьмите большие экраны, например, 27 дюймов или больше, с разрешением 2560 x1440 пикселей или ещё больше. Если наш текст имеет размер 16 пикселей, он будет казаться намного меньше, чем есть на самом деле, и в результате наш пользовательский интерфейс может показаться сломанным, что, в свою очередь, влияет на UX.
Несмотря на это, многие разработчики по-прежнему используют пиксель в качестве стандартной единицы измерения.
mm/cm/in
Мы знаем эти единицы измерения из реального мира, и нечасто мы видим, что они используются в веб-мире. Но эти единицы отлично подходят для подготовки нашей страницы к печати. Поскольку mm, cm, in всегда одинаковы, мы можем использовать @media print запрос для реализации этих CSS единиц только при печати.
pt/pc
Также есть единицы pt(point) и pc(pica), которые используются редко. 1pt составляет 1/72 дюйма а 1pc — 12 точек.
ПРИМЕЧАНИЕ. Несмотря на то, что mm, cm, in, pt, pc являются физическими единицами, нет реальной гарантии, что 1cm в CSS будет равен 1 см на бумаге. Тем не менее, эти единицы лучше подходят для печати, чем другие, о которых мы собираемся поговорить.
2. Относительные единицы CSS
В отличие от абсолютных единиц, относительные единицы меняются в зависимости от размера экрана и / или настроек. Относительные единицы отлично подходят для создания адаптивного дизайна, но они плохо подходят для печати.
Процент (%)
Тоже что px в абсолютных единицах, в относительных единицах — %. Мы можем назвать % «устаревшей» единицей. Они довольно просты в использовании. 1% относится к 1% от размера родительского элемента.
В приведенном ниже примере у нас div#parent равен 400px ширины и 200px высоты. У нас также есть div#child шириной 25%, что составляет 125px и высотой 30%, что равно 60px.
em / rem
em и rem единицы практически одинаковы. Разница в том, что em применяется к font-size элемента, а rem применяется к font-size корневого элемента.
em
1em равно 100% значения font-size элемента. Таким образом, если font-size элемента равен 30px то 1em тоже равно 30px. 2em для того же элемента равно 60px. Использование em для свойства font-size может быть не лучшей идеей, но использование em для полей, отступов и ширины — это нормально.
rem
1rem равно 100% значения font-size корневого элемента. Стандартный font-size встроенный браузер — это 16px если вы не меняете его, и мы скоро увидим, почему неразумно его менять.
Единицы rem отлично подходят для адаптивного дизайна и удобны для доступа (вот почему мы не должны изменять размер корневого шрифта). Допустим, у нас есть пользователь, который изменил (в браузере) размер font-size корневого элемента с 16 на 25 пикселей. Если мы использовали rem, наш дизайн будет соответствующим образом масштабироваться, и пользовательский интерфейс останется нетронутым, следовательно, наш UX будет одинаковым для всех пользователей.
ex / ch
Подобно em и rem, единицы ex и ch используются для font-size. Однако эти единицы также относятся к font-family. Ch обозначает символьную единицу и определяется шириной символа «0». Единица ex определяются как «текущая высота-х текущего шрифта или половины 1em», согласно статье в freeCodeCamp. Высота-x данного шрифта – это высота его строчной буквы «x».
lh /rlh
lh используется для высоты строки а rlh используется для высоты строки корневого элемента. Подобно em и rem, lh «равно вычисленному значению line-height» элемента, в то время rlh как «равно вычисленному значению line-height» корневого элемента. Если line-height: 20px тогда 1lh или 1rlh равно 20px, это зависит от того, говорим ли мы о высоте строки элемента или о высоте строки корневого элемента. Согласно статье css-tricks.com, эти единицы полезны для выравнивания значков с текстом.
vw / vh
vw обозначает ширину области просмотра а vh обозначает высоту области просмотра. Это означает, что эти единицы зависят от размера экрана. Элемент 50vw займет 50% ширины экрана независимо от размера и разрешения экрана. То же самое и с vh. Элемент 50vh займет 50% высоты экрана независимо от размера и разрешения экрана. Мы можем использовать их для ширины разделов, что может оказаться отличным выбором для адаптивного дизайна.
vmin / vmax
В отличие от vw и vh, vmin и vmax зависят от максимальной ширины и минимальной высоты экрана, или наоборот. Например, если размер экрана составляет 1920 на 1080 пикселей, то 1vmax равно 19,2 пикселей а 1vmin равно 10,8 пикселей. Если размер экрана 720px на 1080px, то 1vmin составляет 7,2 пикселей и 1vmax — 10,8 пикселей.
Для расчета vmin и vmax мы берем размер экрана , а затем разделяем и ширину и высоту на 100.
Заключение
Еще есть единицы, которые мы здесь не обсуждали. Мы выбрали именно эти единицы, потому что они либо часто используемые, либо полезные. Практически любая из них «сделает свою работу». Но есть единицы, которые для одних вещей лучше, чем для других. Для получения дополнительной информации о единицах CSS мы можем использовать спецификацию уровня 4 для значений CSS.
Автор: Amer Sikira
Источник: webinuse.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
