Понимание единиц в CSS: полное руководство

CSS (каскадные таблицы стилей) — важнейший компонент современного веб-дизайна. Это язык, который придает вашему веб-сайту его внешний вид. Но чтобы по-настоящему освоить CSS, вам нужно понять единицы измерения, которые он использует для измерения таких вещей, как длина, угол, время и разрешение.

В этом руководстве мы рассмотрим каждый тип модуля CSS, предоставив пояснения и практические примеры, которые помогут вам понять их использование. Мы рассмотрим все, от абсолютных и относительных единиц длины, таких как px, em, rem, и единиц измерения области просмотра, таких как vw, vh, до более специализированных единиц, таких как градусы для вращения, секунды и миллисекунды для длительности анимации и даже точки на дюйм. dpi для разрешения.

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

1. Абсолютная длина в пикселях (пиксели)

Это наиболее часто используемый модуль в веб-дизайне. Пиксель представляет собой одну точку на экране компьютера.

Пример: размер шрифта: 16px; устанавливает размер шрифта 16 пикселей.

см (сантиметры)

Эта единица измерения обычно не используется в веб-дизайне, поскольку размеры и разрешения экрана сильно различаются между устройствами. Тем не менее, это может быть полезно для печатных СМИ.

Пример: ширина: 10 см; устанавливает ширину элемента равной 10 сантиметрам.

мм (миллиметры)

Подобно сантиметрам, миллиметры обычно не используются в веб-дизайне, но могут быть полезны для печатных СМИ.

Пример: ширина: 100 мм; устанавливает ширину элемента в 100 миллиметров.

в дюймах)

Этот модуль также более полезен для печатных СМИ, чем для веб-дизайна.

Пример: ширина: 4 дюйма; устанавливает ширину элемента на 4 дюйма.

пт (очки)

Пункты традиционно используются в печатных СМИ (1 пункт равен 1/72 дюйма). В CSS точки полезны для создания стилей, которые можно напечатать с высокой точностью.

Пример: размер шрифта: 12pt; устанавливает размер шрифта 12 пунктов.

ПК (пики)

Пика равна 12 очкам. Это еще одна единица, которая чаще используется в печати, чем в веб-дизайне.

Пример: размер шрифта: 1 шт.; устанавливает размер шрифта 12 пунктов.

Абсолютная длина в CSS:

Вот пример того, как эти единицы могут использоваться в правиле CSS:

div { ширина: 300 пикселей; высота: 20см; прокладка: 5 мм; граница: 1 сплошной черный; размер шрифта: 14pt; запас: 1 шт.; }

Объяснение кода:

Элемент div будет иметь ширину 300 пикселей, высоту 20 сантиметров, отступы 5 миллиметров, границу шириной 1 дюйм, размер шрифта 14 пунктов и поле 1 пика.

Однако имейте в виду, что эти устройства могут отображаться по-разному на разных экранах и устройствах из-за разной плотности пикселей и размеров экрана.

2. Относительная длина em

Эта единица измерения зависит от размера шрифта элемента.

Пример: если элемент имеет размер шрифта 16 пикселей, то 1em = 16 пикселей для этого элемента. Если вы установите margin: 2em;, поле будет в два раза больше текущего размера шрифта.

бэр

Эта единица измерения относится к размеру шрифта корневого элемента (обычно элемента). Если корневой элемент имеет размер шрифта 20 пикселей, то 1rem = 20 пикселей для любого элемента на странице.

Пример: размер шрифта: 1.5rem; установит размер шрифта в 1,5 раза больше размера шрифта корневого элемента.

бывший

Эта единица измерения относится к высоте x текущего шрифта (примерно высота строчных букв). Это не обычно используется.

ч

Эта единица равна ширине «0» (нуля) текущего шрифта.

Пример: ширина: 20ч; сделает элемент шириной 20 символов «0».

vw (ширина области просмотра)

Эта единица равна 1% ширины области просмотра.

Пример: ширина: 50vw; сделает элемент на 50% шире окна просмотра.

vh (высота области просмотра)

Эта единица равна 1% высоты области просмотра.

Пример: высота: 70вх; сделает элемент на 70% выше области просмотра.

мин

Эта единица равна 1% меньшего размера (ширины или высоты) окна просмотра.

Пример: размер шрифта: 4vmin; установит размер шрифта на 4% меньшего размера области просмотра.

vmax

Эта единица равна 1% большего размера (ширины или высоты) окна просмотра.

Пример: размер шрифта: 4vmax; установит размер шрифта на 4% от большего размера области просмотра.

%

Эта единица измерения относится к родительскому элементу.

Пример: если вы установите ширину: 50%;, элемент будет занимать половину ширины своего родительского элемента.

Относительная длина в CSS:

Вот пример того, как эти единицы могут использоваться в правиле CSS:

div {размер шрифта: 2em; набивка: 1,5 бэр; ширина: 75vw; высота: 50вх; запас: 5vmin; высота строки: 200%; }

Объяснение:

Элемент div будет иметь размер шрифта в два раза больше, чем у его родителя, отступы в 1,5 раза больше размера корневого шрифта, ширину 75% ширины окна просмотра, высоту 50% высоты окна просмотра и поле 5% меньшего размера окна просмотра. Высота строки составляет 200% от текущего размера шрифта.

3. Единицы времени с (секунды)

Эта единица представляет продолжительность времени в секундах. Он обычно используется со свойствами анимации и перехода.

Пример: продолжительность анимации: 2 с; заставит анимацию длиться 2 секунды.

мс (миллисекунды)

Эта единица представляет продолжительность времени в миллисекундах, где 1000 миллисекунд равны 1 секунде. Он также используется со свойствами анимации и перехода.

Пример: длительность перехода: 500 мс; переход будет длиться 500 миллисекунд или полсекунды.

Единицы времени в CSS №1:

Вот пример того, как эти единицы могут использоваться в правиле CSS:

div {transition: background-color 0.5s easy-in-out; анимация: двигаться на 2 секунды бесконечно; } @keyframes move { 0% { transform: translateX(0); } 100% { преобразование: translateX (100px); } }

Объяснение кода:

Элемент div будет иметь переход, который изменяет цвет фона в течение 0,5 секунды, и анимацию, которая перемещает элемент из его текущей позиции на 100 пикселей вправо в течение 2 секунд. Анимация повторяется бесконечно из-за бесконечного ключевого слова.

Единицы времени в CSS #2:

Другим примером может быть задерживать в переходе или анимации:

div { переход: все двойки вместо единиц; /* переход начнется с задержкой в ​​1 секунду */ анимация: spin 4s linear 0.5s infinity; /* анимация начнется с задержкой в ​​0,5 секунды */ } @keyframes spin { from { transform: rotate(0deg); } в { преобразование: поворот (360 градусов); } }

Объяснение кода:

Элемент div имеет переход, который начинается с задержкой в ​​1 секунду, и анимацию, которая начинается с задержкой в ​​0,5 секунды. Анимация заставляет div вращаться бесконечно.

4. Единицы разрешения

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

dpi (точек на дюйм)

Эта единица представляет собой количество пикселей на дюйм.

Пример. Медиа-запрос типа @media (min-resolution: 300dpi) {…} применит стили в фигурных скобках только к устройствам с плотностью пикселей не менее 300 точек на дюйм.

dpcm (количество точек на сантиметр)

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

Пример: @media (min-resolution: 118dpcm) {…} будет применять стили к устройствам с плотностью пикселей не менее 118 точек на сантиметр.

dppx (количество точек на пиксель)

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

Пример: @media (min-resolution: 2dppx) {…} будет применять стили к устройствам с плотностью пикселей не менее 2 точек на единицу пикселя CSS.

Единицы разрешения в CSS:

Вот пример того, как эти единицы могут использоваться в правиле CSS:

@media (минимальное разрешение: 2dppx) { body { background-image: url (“high-res-background.png”); } } @media (максимальное разрешение: 1,5 dppx) { body { background-image: url(“low-res-background.png”); } }

Объяснение кода:

Устройства с плотностью пикселей 2 точки на единицу пикселя CSS или выше будут использовать фоновое изображение с высоким разрешением, а устройства с плотностью пикселей 1,5 точки на единицу пикселя CSS или ниже будут использовать фоновое изображение с низким разрешением.

5. Угловые единицы

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

град (Градусы)

Эта единица представляет собой угол в градусах.

Пример:

преобразование: поворот (45 градусов); повернет элемент на 45 градусов по часовой стрелке.

град (градианы)

Эта единица представляет собой угол в градусах, где 100 градусов равны прямому углу.

Пример:

преобразование: повернуть (100 град); повернул бы элемент на 90 градусов по часовой стрелке.

рад (радианы)

Эта единица представляет собой угол в радианах, где 2× радиан равняется полному кругу.

Пример:

преобразование: повернуть (3,14159 рад); повернет элемент на 180 градусов.

повернуть

Эта единица представляет собой полный круг.

Пример:

преобразование: повернуть (0,5 оборота); повернет элемент на 180 градусов.

Угловые единицы в CSS:

пример того, как эти единицы могут использоваться в правиле CSS:

div { преобразование: поворот (45 градусов); } div: hover { преобразование: поворот (0,5 оборота); }

Объяснение кода:

По умолчанию элемент div будет повернут на 45 градусов. Когда вы наводите курсор на div, он поворачивается на 180 градусов (0,5 полного оборота).

Бонус: Flex fr (дробная единица)

Эта единица используется с CSS Grid Layout и представляет часть доступного пространства в контейнере сетки. Если у вас есть сетка с двумя столбцами, определенными как 1fr 2fr, первый столбец займет одну треть доступного пространства, а второй столбец займет две трети.

Пример:

.grid-контейнер { дисплей: сетка; столбцы сетки-шаблона: 1fr 2fr; }

Общее доступное пространство разделено на 3 равные части (1fr + 2fr = 3fr), первая колонка занимает 1/3 места, а вторая колонка занимает 2/3 места.