Единицы измерения в CSS

Содержание

Единицы измерения в CSS: px, rem, em, fr, %
Варианты единиц измерения
px
rem
em
fr
Для чего использовать
px
rem и em
fr
Материалы по теме
Единицы измерения в CSS
Единицы длины
Абсолютные единицы длины
px
in , pc , pt , cm , mm , q
Относительные единицы длины
em
ex , ch
rem
vw , vh , vmin , vmax
Углы
Время

Единицы измерения в CSS: px, rem, em, fr, %

Единицы измерения в CSS используют для определения размеров элементов, расстояний, шрифтов и других свойств. В статье расскажем про пять единиц измерения: px , em , rem , fr , % . Они делятся на абсолютные и относительные. Давайте разбираться, чем они отличаются.

💡 Абсолютные единицы измерения привязаны к настоящим физическим размерам.

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

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

Познакомиться со всеми относительными единицами измерения можно в спецификации. Среди них em , rem , vh , ex и другие единицы измерения.

Варианты единиц измерения

px

Пиксель бывает физическим и CSS-пикселем.

Физический пиксель — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px , то подразумеваем, что по всей ширине находится 480 неделимых ячеек, где 1px равен одной ячейке.

CSS-пиксель — это единица измерения CSS, равная 1/96 части дюйма. Один пиксель не всегда равен одной ячейке на экране. Это зависит от плотности экрана, чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение. Подробнее рассказали в статье «Как подготовить вёрстку к retina-экранам».

Пример использования

rem

Единица измерения, которая зависит от размера шрифта корневого элемента в документе — обычно . Значение 1rem соответствует размеру шрифта корневого элемента. Например, если в теге задан шрифт 16px , то для всех вложенных в него элементов font-size: 1.5rem; установит размер шрифта в 24px .

Пример использования

em

Единица измерения, которая задаёт размер шрифта равный родительскому элементу. Например, если у родительского элемента размер шрифта равен 16px , то font-size: 1.5em; установит размер шрифта дочернего элемента в 24px .

Пример использования

Для значение 2em означает, что размер шрифта будет в два раза больше, чем размер шрифта элемента-родителя.

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

Пример использования

Контейнер занимает 80% ширины родительского элемента, а блок-коробка занимает 50% ширины контейнера.

fr

Доля свободного пространства — относительная единица измерения, которая используется в CSS Grid для распределения доступного пространства между ячейками. Свободное пространство в родительском элементе делится на равные доли — fr , а дочерние элементы распределяют пространство между собой. На примере мы покажем, как пространство делится между элементами.

Пример использования

Для чего использовать

px

Задаёт ширину и высоту элементов: width: 200px; , height: 100px; .
Задаёт отступы и поля: margin: 10px; , padding: 20px; .
Задаёт размер шрифта: font-size: 16px; .

rem и em

Задаёт размер шрифта: font-size: 1.5rem; , font-size: 1.2em; .
Задаёт отступы и полей с учетом размера шрифта: margin: 0.5rem; , padding: 0.8em; .

Задаёт размер элементов относительно размеров родительского элемента: width: 50%; , height: 75%; .
Задаёт отступы и поля относительно размеров родительского элемента: margin: 10%; , padding: 5%; .

fr

Используется для распределения доступного пространства между ячейками сетки: grid-template-columns: 1fr 2fr; — распределит доступное пространство между двумя колонками в соотношении 1:2.
Используется для распределения пространства между элементами в гибком контейнере: flex: 1fr; — распределит доступное пространство между элементами в контейнере.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Единицы измерения в CSS

Значения многих свойств можно указывать в процентах. В основном они используются для задания размеров блоков и шрифтов.

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

значение того же свойства родительского элемента;
значение другого свойства того же элемента;
значение какого-либо свойства элемента-предка (например, ширина родительского блока или окна браузера).

Вакуум космоса не является абсолютным.

Вакуум космоса не является абсолютным .

В данном примере размер шрифта элемента в полтора раза больше, чем у его родительского элемента. Как бы ни менялся размер шрифта элемента

, всегда будет сохраняться полуторное отношение этих шрифтов.

Пример с зависимостью от своих свойств:

Вакуум космоса не является абсолютным.
Вакуум космоса не является абсолютным.
Вакуум космоса не является абсолютным.
Вакуум космоса не является абсолютным.

Междустрочный интервал каждой строки имеет значение 150% , но на экране интервал отличается. Это является следствием того, что в процентах интервал задаётся относительно размера шрифта текущего элемента, а не значения line-height родительского элемента.

Единицы длины

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

Абсолютные единицы длины

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

При вёрстке страницы эти единицы почти не используются, так как усложняют создание гибкой вёрстки под различные устройства вывода (компьютер, мобильное устройство и т.д.). Ниже в таблице представлены все абсолютные единицы и их соотношения:

Ед. измерения	Название	Соотношение
px	Пиксель	1px = 1in / 96
in	Дюйм	1in = 96px
pc	Пика	1pc = 1in / 6
pt	Пункт	1pt = 1in / 72
cm	Сантиметр	1cm = 1in / 2.54
mm	Миллиметр	1mm = 1in / 25.4
q	Четверть миллиметра	1q = 1in / 101.6

px

Пиксель является основной единицей измерения. Все размеры, унаследованные или заданные в любых единицах измерения или ключевыми словами, для вывода на экран пересчитываются браузером в пиксели. Такие значения называются вычисленными .

Размер пикселя зависит от физических размеров экрана и установленного разрешения. На практике пиксели на экране не могут быть разделены, но в CSS можно использовать дробные значения в пикселях, например:

Такое явление вполне нормально. Если необходимые размеры в пикселях получаются дробными, то желательно их так и указывать. В таком случае браузер автоматически округлит значения до целых чисел наиболее оптимальным способом.

in , pc , pt , cm , mm , q

Остальные абсолютные единицы измерения ( in , pc , pt , cm , mm , q ) жёстко привязаны к пикселю и на практике не используются.

Относительные единицы длины

В основном при вёрстке используются относительные единицы измерения длины. Они не имеют фиксированного значения, а зависят от значений определённых свойств. Таким образом, достаточно изменить свойство одного элемента, а все остальные автоматически пересчитаются под новый параметр. Этот подход является основным при создании гибкой вёрстки страницы.

Ниже в таблице представлены все относительные единицы:

Ед. измерения	Значение
em	Размер шрифта текущего элемента.
ex	Высота буквы x (в нижнем регистре) в шрифте текущего элемента.
ch	Ширина символа 0 в шрифте текущего элемента.
rem	Размер шрифта корневого элемента ( ).
vw	1/100 доля от ширины окна браузера.
vh	1/100 доля от высоты окна браузера.
vmin	1/100 доля от меньшей стороны окна браузера.
vmax	1/100 доля от большей стороны окна браузера.

em

1em равен вычисленному значению размера шрифта текущего элемента. Если для данного элемента размер шрифта не задан, тогда используется значение, унаследованное от родительского элемента, или значение браузера по умолчанию.

Пример: имеется параграф с отступом красной строки. Если отступ задан в пикселях, то при любом изменении размера шрифта он будет постоянный:

Вакуум космоса не является абсолютным.

Чтобы отступ соответствовал размеру шрифта, можно воспользоваться единицей em :

Вакуум космоса не является абсолютным.

В данном случае отступ автоматически меняется в соответствии с изменением размера шрифта.

Размер шрифта тоже можно задавать в em -ах. В этом случае 1em равен унаследованному от родителя значению font-size . Такой способ используется редко, так как усложняет восприятие кода. Чтобы задать размер шрифта относительно родительского, используется процентная запись:

Вакуум космоса не является абсолютным.

Эти записи идентичны, но во втором случае легче определить, относительно чего высчитывается размер шрифта.

ex , ch

Единицы ex и ch жёстко привязаны к размеру шрифта. Они на практике не применяются, так как использование единицы em обычно достаточно.

rem

1rem равен вычисленному значению размера шрифта корневого элемента документа (элемент для HTML-страницы).

Единицу rem удобно использовать для масштабирования элементов на странице (актуально для создания гибкой вёрстки). Можно присвоить свойству font-size элемента абсолютное значение, например, 10px . Далее, единицу rem можно использовать как свою собственную в любом месте страницы. Для масштабирования всех необходимых размеров достаточно изменить размер шрифта всего одного элемента страницы. Это можно сделать при помощи JavaScript или применением медиа-запросов.

Чаще всего rem применяется для задания размера шрифта элементов страницы. Если использовать em или проценты для этих целей, тогда необходимо контролировать размер шрифта родительского элемента, который, в свою очередь, может быть задан в относительных единицах. Пример с процентами:

   html < font-size: 30px; >div  Вакуум космоса не является абсолютным.

Для всех -ов размер шрифта задан одинаковый, но отображаются они по-разному. Всё дело во вложенности элементов и, следовательно, различных родительских элементах.

   html < font-size: 30px; >div  Вакуум космоса не является абсолютным.

Все -ы отображаются одинаково, так как в любом месте страницы 1rem = 30px .

vw , vh , vmin , vmax

Единицы vw , vh , vmin и vmax напрямую зависят от размеров окна браузера (видимой части страницы). Следовательно, наилучший вариант их использования — это создание гибкой вёрстки. Пример:

Размер блока автоматически меняется при изменении размеров окна браузера

Углы

Углы в CSS можно задавать с помощью нескольких единиц измерения:

Ед. измерения	Название	Соотношение
deg	Градус	1deg = 1turn / 360
grad	Град (гон)	1grad = 1turn / 400
rad	Радиан	1rad = 1turn / 2π
turn	Оборот (цикл)	1turn = 360deg

Например, угол в 90° можно задать, как 90deg , 100grad , 1.57rad или 0.25turn .

Углы могут использоваться для указания направления (например, в градиентах). Нулевому углу соответствует вектор, направленный вертикально вверх. Поворот этого вектора по часовой стрелке на заданный угол определяет необходимое направление. Углу в 90° соответствует направление слева направо.

Время

Для задания времени в CSS введены две единицы измерения:

Ед. измерения	Название	Соотношение
s	Секунда	1s = 1000ms
ms	Миллисекунда	1ms = 1s / 1000

Панель навигации
Размер шрифта
1. Автоматически
2. Самый мелкий
3. Мелкий
4. Средний
5. Крупный
6. Самый крупный
Цветовая схема
1. Тёмная
2. Светлая

О сайте: Основная цель: Предоставить полезную и актуальную информацию по всем этапам создания сайтов. Целевая аудитория: Начинающие пользователи, кто хочет самостоятельно создавать сайты, и опытные веб-разработчики.

Источник