День 1963. #Шпаргалка #CSS
Единицы Размеров в CSS. Начало
Поговорим немного о фронтенде. Тем более, что разобраться с UI бывает очень непросто. Многие свойства CSS принимают числа в качестве значений. Кроме того, за ними часто следуют единицы измерения. Что такое px? Чем отличаются em и rem? И как определяются итоговые размеры?

В CSS есть два типа единиц: абсолютные и относительные.

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

1. Длина
- cm – сантиметры (96px/2.54)
- mm – миллиметры (1/10cm)
- Q – четверть-миллиметры (1/40cm)
- in – дюймы (2.54cm = 96px)
- pc – пики (1/6in)
- pt – точки (1/72in)
- px – пиксели (1/96in)

2. Углы
Хороши, например, для направления линейного градиента (linear-gradient) или поворота (rotate) элемента.
- deg – градусы (полный круг – 360deg)
- grad – грады (круг – 400grad)
- rad – радианы (круг - 2π ~ 6.2832rad)
- turn – повороты (круг - 1turn)
Например, rotate(180deg)

3. Время
Тут всё просто
- s – секунды,
- ms - миллисекунды
Например, animation-duration: 2s

4. Разрешение
Количество точек на единицу измерения. Чем меньше точек, тем более «пикселизированным» и размытым будет изображение. Отлично подходит для таргетинга стилей на определенные экраны в медиа-запросах.
- dpi – точек на дюйм
- dpcm – точек на сантиметр
- dppx (или x) – точек на пиксель
Например,

@media (min-resolution: 96dpi) { … }

Спецификация определяет значение infinite для медиа-запросов под экраны без ограничений разрешения.

Окончание следует…

Источник: https://css-tricks.com/css-length-units/