Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

vw vh css

Всем привет. Сегодня будут рассмотрены относительные единицы измерения появившиеся в спецификации 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) работают по принципу процентных единиц измерения, но не зависят от размеров элементов и блоков страницы.

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

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

вк

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

Оцените статью

Еще статьи

Область видимости php

htaccess запретить доступ к директории

CSS media screen

mix-blend-mode css

array filter js

Строки шаблонов javascript

out of range

BeautifulSoup4 python

quotes css

Комментарии

Проверочный код

KiaEvive

[url=http://kamagra50.com/]kamagra online[/url]

14:06 22-07-2019

EyeEvive

<a href="https://kamagra50.com/">kamagra 100mg</a>

13:19 21-07-2019

DenEvive

<a href="https://kamagra50.com/">kamagra online</a>

11:59 21-07-2019

JasonEvive

<a href="https://kamagra50.com/">kamagra</a>

18:49 17-07-2019

История

    ПОДПИСКА

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

    НОВОСТИ

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