Работа с размерами в CSS.

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

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

Хотя единиц измерения в CSS довольно много, но их можно разбить на 3 способа, как вы можете задать размеры в CSS. 

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

Как правило, это просто какой-то коэффициент. Для задания значения какого-то свойства может использоваться целое или действительное число.

Целое число может быть 0, 1, 2, 3, …

Действительные числа - это те, которые содержат целую, десятичную, сотую и.т.д. часть, которая указывается после знака "."

Например, 0.55 или 4.5 и.т.д.

Разделителем между целой и десятичной, сотой и.т.д. частью будет являться знак точка.

2 способ. Абсолютные размеры.

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

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

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

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

Для этой цели была придумана такая величина как пиксель.

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

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

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

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

Значение в пикселях для других единиц измерения следующее:

1 cm (см) ≈ 38 пикселей

1 mm (мм) ≈ 3.8 пикселей

1 pt (типографический пункт) ≈ 4/3 пикселей

1 pс (типографическая пика) ≈ 16 пикселей

Браузер пересчитывает эти единицы измерения в пиксели.

Вы может использовать все эти единицы измерения при веб-разработке, но нужно иметь ввиду, что браузер все равно пересчитывает все эти единицы измерения в пиксели. Если вы укажете значение 1 см, браузер пересчитает этот размер в 38 пикселей.

По этой причине единицы измерения из реальной жизни редко используются при веб-разработке. И они в любом случае не будут соответствовать реальным своим значениям. Чаще всего при веб-разработке используют единицу измерения пиксель.

3 способ. Относительные размеры.

Здесь все зависит относительно той величины, будут рассчитываться браузером итоговые размеры.

em и rem (ex и ch) - эта группа рассчитывает свой размер относительно размеров используемого шрифта на сайте.

% - размер, который составляет определенную часть (%) от родительского элемента. 

vw и vh (vmax и vmin) - относительно окна просмотра браузера. Эти единицы измерения введены в CSS, начиная с 3 версии.

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

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


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