03.12.2021

Руководство по единицам измерения CSS

Управление по единицам измерения CSS

От создателя: в 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.

По материалам webformyself.com

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

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