День 1963. #Шпаргалка #CSS
Единицы Размеров в CSS. Начало
Поговорим немного о фронтенде. Тем более, что разобраться с UI бывает очень непросто. Многие свойства CSS принимают числа в качестве значений. Кроме того, за ними часто следуют единицы измерения. Что такое px? Чем отличаются em и rem? И как определяются итоговые размеры?
В CSS есть два типа единиц: абсолютные и относительные.
Абсолютные единицы
Каким бы ни было число, оно именно так и рассчитывается в браузере, независимо от размера других элементов. Наиболее распространённое – пиксель (px) — наименьший строительный блок для отображения графики, основанный на разрешении. На экране с высоким разрешением пиксель будет меньше, чем на экране с низким.
Абсолютные значения предсказуемы. Но, если пользователь увеличивает масштаб страницы, то всё, что определено с абсолютным значением, соответственно увеличит свой абсолютный размер.
1. Длина
-
-
-
-
-
-
-
2. Углы
Хороши, например, для направления линейного градиента (linear-gradient) или поворота (rotate) элемента.
-
-
-
-
Например,
3. Время
Тут всё просто
-
-
Например,
4. Разрешение
Количество точек на единицу измерения. Чем меньше точек, тем более «пикселизированным» и размытым будет изображение. Отлично подходит для таргетинга стилей на определенные экраны в медиа-запросах.
-
-
-
Например,
Спецификация определяет значение infinite для медиа-запросов под экраны без ограничений разрешения.
Окончание следует…
Источник: https://css-tricks.com/css-length-units/
Единицы Размеров в 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: 2s4. Разрешение
Количество точек на единицу измерения. Чем меньше точек, тем более «пикселизированным» и размытым будет изображение. Отлично подходит для таргетинга стилей на определенные экраны в медиа-запросах.
-
dpi – точек на дюйм-
dpcm – точек на сантиметр-
dppx (или x) – точек на пиксельНапример,
@media (min-resolution: 96dpi) { … }Спецификация определяет значение infinite для медиа-запросов под экраны без ограничений разрешения.
Окончание следует…
Источник: https://css-tricks.com/css-length-units/
👍9
День 1964. #Шпаргалка #CSS
Единицы Размеров в CSS. Окончание
Начало. Абсолютные единицы
Относительные единицы
Значение относительной единицы зависит от размера чего-то ещё. Допустим, у нас есть элемент <div> с абсолютным значением высоты 200 пикселей. Эта высота никогда не изменится. Но если задать элементу относительную ширину в 50%, он займёт половину ширины страницы (либо половину ширины своего родителя). Относительное число действует как множитель для вычисления значения, в зависимости от того, относительно какого размера мы считаем.
1. Проценты
Используются, когда нет другого контекста для задания размера.
2. Относительно шрифта
-
-
Аналогично:
-
-
-
-
-
Большинство из этого требуется только для типографии. Однако, хорошей практикой является задавать размер шрифта в пикселях для элемента <html>, а для всех остальных элементов использовать относительные em и rem:
3. Относительно области просмотра (viewport – видимая часть страницы)
Эти величины всегда считаются относительно размеров страницы.
-
-
-
-
-
-
-
-
-
4. Относительно контейнера
Эти величины считаются в контейнер-запросах относительно размеров соответствующего контейнера.
-
-
-
-
-
Например,
Когда родительский элемент блока child превысит ширину в 30 символов, он станет занимать вместо полной ширины контейнера только половину его ширины.
Источник: https://css-tricks.com/css-length-units/
Единицы Размеров в CSS. Окончание
Начало. Абсолютные единицы
Относительные единицы
Значение относительной единицы зависит от размера чего-то ещё. Допустим, у нас есть элемент <div> с абсолютным значением высоты 200 пикселей. Эта высота никогда не изменится. Но если задать элементу относительную ширину в 50%, он займёт половину ширины страницы (либо половину ширины своего родителя). Относительное число действует как множитель для вычисления значения, в зависимости от того, относительно какого размера мы считаем.
1. Проценты
% - относительно размера родительского элемента.Используются, когда нет другого контекста для задания размера.
2. Относительно шрифта
-
em – элемент (относительно размера шрифта родительского элемента)-
rem – корневой элемент (относительно размера шрифта элемента <html>)Аналогично:
-
ch и rch – ширина символа (отличается для каждого шрифта и у разных символов, кроме моноширинных шрифтов)-
lh и rlh – высота строки-
cap и rcap – высота заглавной буквы-
ic и ric – ширина иероглифа-
ex и rex – ширина буквы X.Большинство из этого требуется только для типографии. Однако, хорошей практикой является задавать размер шрифта в пикселях для элемента <html>, а для всех остальных элементов использовать относительные em и rem:
html {
/* Наследуется всеми элементами */
font-size: 18px;
}
.parent {
/* Изменяется при смене размера в `html` */
font-size: 1.1rem;
}
.child {
/* Изменяется при смене размера в `.parent` */
font-size: 0.9em;
}3. Относительно области просмотра (viewport – видимая часть страницы)
Эти величины всегда считаются относительно размеров страницы.
-
vh и vw – высота и ширина (100vh – высота экрана)-
vmin и vmax – минимум и максимум между vh и vw соответственно-
lvh и lvw – «большие» высота и ширина (в полноэкранном режиме)-
lvb и lvi – эквиваленты lvh и lvw для блока и строки-
svh и svw – «маленькие» высота и ширина (когда отображаются UI браузера и экранная клавиатура)-
svb и svi – эквиваленты svh и svw для блока и строки-
dvh и dvw – «динамические» высота и ширина (изменяются, например, при отображении/скрытии экранной клавиатуры)-
dvb и dvi – эквиваленты dvh и dvw для блока и строки-
dvmin и dvmax – минимум и максимум между dvh/dvb и dvw/dvi соответственно. 4. Относительно контейнера
Эти величины считаются в контейнер-запросах относительно размеров соответствующего контейнера.
-
cqw – ширина контейнера (100cqw – полная ширина)-
cqh – высота контейнера-
cqi – ширина строкового контейнера-
cqb – ширина блокового контейнера-
cqmin и cqmax – минимум или максимум между cqi и cqbНапример,
.parent {
container-type: inline-size;
}
.child {
width: 100%;
@container (width > 30ch) {
.child {
width: 50cqi;
}
}
}Когда родительский элемент блока child превысит ширину в 30 символов, он станет занимать вместо полной ширины контейнера только половину его ширины.
Источник: https://css-tricks.com/css-length-units/
👍13