Всем привет. Сегодня будут рассмотрены относительные единицы измерения появившиеся в спецификации css3. Итак, поехали!

Допустим у нас есть изображение:

<style>
    *{
        padding:0;
        margin:0;
    }
</style>
<img src="img/img.jpg">

И мы хотим сделать это изображение на весь экран. Здесь мы можем поступить двумя способами, либо использовать процентные единицы измерения:

img{
    width:100%;
    height:100%;
}

Или же воспользоваться относительными:

img{
    width:100vw;
    height:100vh;
}

vw - относительная единица ширины окна,vh - относительная единица высоты окна.

Главным отличием относительных единиц измерения vm, vh от процентных заключается в том что они высчитываются относительно полной ширины и высоты всего окна.

К примеру если полная ширина окна является 1200px, то 1vw будет равняться 12px, а следовательно 100vw полной ширине 1200px. Причем ширина 100vw будет учитываться без полосы прокрутки и поэтому у нас может появится горизонтальный скролл. Помните про это!

Тоже самое и с высотой vh. Если высота окна равняется 10000px, 1vh будет равняться 100px, а 100vh это полная высота окна. Мы также можем указывать значения выходящие за пределы размеров высоты и ширины окна. (300vh,400vw)

Данные единицы измерения как и процентные, отлично переносят масштабирование.

Еще есть такие интересные единицы измерения vmin и vmax.

Допустим ширина нашего окна 1200px, а высота 10000px. Единица измерения vmin - берет минимальный размер из отношения ширины и высоты окна. В нашем случае ширина является минимальным размером 1200px(1vmin=12px), высота максимальным 10000px(1vmax=100px).

Вывод: относительные единицы измерения (vw, vh, vmin, vmax) работают по принципу процентных единиц измерения, но не зависят от размеров элементов и блоков страницы.

Размер высчитывается в процентном соотношении относительно ширины и высоты страницы.

На этом у меня все. Если появились вопросы оставляйте их в комментариях или группе

вк

Я с вами прощаюсь. Желаю успехов и удачи! Пока!