Единицы измерения css

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

Я не преследую цель перечислить все виды измерений в css, а лишь перечислю те единицы измерения, с которыми так или иначе сталкивался при строительстве сайта!

Подробно о единицах измерения в css

1. px : пиксели
2. % : проценты
3. em : значение относительно шрифта.
4. vw, vh, vmin, vmax
5. fr : единица гибкости

Px : пиксели

Начинаем, как всегда, с определения : "что такое единица измерения px"

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Пример единицы измерения пикселя на экране:

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.



Единица измерения пиксель - дробная:

Единица измерения пиксель можно прописывать дробными, например: 16.5px

Единица измерения пиксель в мобильном:

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

Использование единицы измерения "пиксели" в элементах dom:

width:200px;width:300px
Html:

<span style="width:200px;background:#8dcaff;">width:200px;</span>

<span style="width:300px;background:background:yellow;">width:300px;</span>

Использование единицы измерения "пиксели" в тексте

Текст в пикселях (font-size: 20px;)

Текст в пикселях (font-size: 30px;) Html:

<span style="display: inline-block;font-size: 20px; padding:20px; background:yellow;">Текст в пикселях (font-size: 20px;)</span>

<span style="display: inline-block;font-size: 30px;padding:20px; background:yellow;">Текст в пикселях (font-size: 30px;)</span>

Это интересно:

Как сантиметр выразить через пиксели?

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.




Единица измерения : % - проценты

Единицу измерения проценты(%) - используют для зависимости одного объекта от другого!

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

Вы увидите, как зависят внутренние блоки от наружной ширины.

Соотношение внутренних блоков 70% к 30%

Как единица измерения работает с текстом:

Стандартный размер текста, который задан на всем сайте по умолчанию, как основной :

Здесь стандартный текст!

Пример шрифта в единицах измерения : проценты:

Сделаем проценты : 200.

Здесь текст в 200%!
Html:
<div style="font-size: 200%;">Здесь текст в 200%!</div>



Em : значение относительно шрифта.

1em – это текущий(базовый) размер шрифта.

2em – это текущий(базовый)* 2 размер шрифта.

3em – это текущий(базовый)* 3 размер шрифта.

И тд...

Примеры единицы измерения "em"

Возможно применение дробей, например 1.5em...

Использование единицы измерения "em" в тексте

Здесь стандартный текст!
Текст в "em" (font-size: 1em;) Текст в "em"(font-size: 1.5em;) Текст в "em" (font-size: 2em;)



Единицы измерения : vw, vh, vmin, vmax

В CSS3 были добавлены новые относительные единицы измерения, такие как vh, vw, vmin, vmax. Эти единицы вычисляются относительно размеров окна браузера.





Единица	Описание
vh	Эквивалентно 1% высоты окна браузера.
vw	Эквивалентно 1% ширины окна браузера.
vmin	Эквивалентно 1% меньшего размера окна браузера по высоте или ширине.
vmax	Эквивалентно 1% большего размера окна браузера по высоте или ширине.





Единицы измерения : vw, vh, vmin, vmax -используются для создания резинового дизайна.




Fr : единица гибкости

Единица измерения "fr" - которая используется в гридах


Не буду подробно останавливаться на данной единице измерения.

Лишь скажу, что "fr" - это те же проценты, но только для "гридов"

Итак html:

<div class="grid">

<div>66.6(6)%</div>

<div>33.3(3)%</div>

</div>

Далее - обращаю ваше внимание на строку:
grid-template-columns: 2fr 1fr;

Что означает 66.6(6)% + 33.3(3)%

Css :

<style>

.grid {

display: grid;

width: 100%;

grid-template-columns: 2fr 1fr;

height: 100px;

}

.grid > :nth-child(1) {

background-color: #FCC;

}

.grid > :nth-child(2) {

background-color: #CFC;

}

Пример единицы измерения fr

Далее разместим приведенный код прямо здесь:

Как и ранее приведенные коды... данный блок можно растянуть и посмотреть, как блоки реагируют на измерение ширины!

66.6(6)%
33.3(3)%