Главная » Статьи » Обзор единиц измерения CSS, связанных с окном просмотра

Обзор единиц измерения CSS, связанных с окном просмотра

Обзор единиц измерения CSS, связанных с окном просмотра

От автора: единицы измерения, связанные с окном просмотра, были введены в Спецификации CSS уровня 3: Значения и единицы измерения. Они позволяют задавать размеры элементов и размеры шрифта в процентах от общей ширины или высоты экрана пользователя (окна просмотра). Давайте рассмотрим, что мы можем сделать, используя в нашем CSS единицы измерения, о которых идет речь.

vh и vw

vh обозначает высоту окна просмотра, а vw — ширину окна просмотра. Следовательно, определение для элемента значения ширины в 50vw означает, что элемент будет иметь ширину, которая составляет 50% от размера области просмотра, и это остается неизменным при изменении размера окна просмотра.

Проценты и единицы измерения, связанные с окном просмотра

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

vmin и vmax

vmin и vmax могут показаться немного сложнее для понимания, но в конце концов все очень просто. vmin измеряется, как процент от наименьшего значения или ширины, или высоты области просмотра, а vmax — процент от наибольшего из них.

Например, окно просмотра имеет ширину 1440px и высоту 800px, если мы установим элемент шириной 50vmin, это будет 50% высоты (400px), и если вместо этого мы установим для элемента ширину 50vmax, это будет 50% от ширины (720px). Если бы у окна просмотра была ширина 800px и высота 1440px, мы получили бы противоположный результат. vmin и vmax могут использоваться для установки размера шрифта, как мы покажем ниже.

Единицы измерения, связанные с окном просмотра, для Hero-разделов

Единицы измерения, связанные с окном просмотра, отлично подходят для создания Hero-разделов, которые занимают точную часть от высоты области просмотра.

Давайте рассмотрим практический пример. Предположим, мы хотим создать 2 раздела, которые занимают всю ширину окна просмотра, и вместе занимают всю высоту окна просмотра. Во-первых, некоторая простая разметка для этих разделов:

<section class="hero"> <h1>I'm a Hero Title</h1>
</section>
<section class="sub-hero"> <h1>I'm the Subhero</h1>
</section>

И затем стили:

.hero { height: 75vh; background: linear-gradient(45deg, #DA4453, #89216B);
} .sub-hero { height: 25vh; background: linear-gradient(115deg, #4e54c8, #8f94fb);
} .hero, .sub-hero { display: flex; align-items: center; justify-content: center; width: 100vw; position: relative; left: 50%; margin-left: -50vw;
}

Теперь две секции вместе занимает всю высоту: 75vh для раздела hero и 25vh для раздела sub-hero. Но статьи на этом сайте находятся внутри контейнера с максимальным значением ширины 55rem, поэтому здесь сложнее сделать так, чтобы наши разделы вышли за пределы контейнера. Только применив ширину в 100vw, мы не сможем добиться этого, потому что элементы все еще начинаются с левого края родительского контейнера.

Благодаря приему, продемонстрированному в этой демо-версии Свена Вольферманна, мы можем использовать единицы, связанные с окном просмотра, чтобы эффективно выйти за пределы элемента контейнера и использовать всю ширину окна просмотра. Это включает в себя смещение элемента в центр окна просмотра, а затем его возврат обратно с отрицательным отступом -50vw. Вот результат:

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

Раздел Hero с панелью навигации

Предположим, вы хотите создать раздел Hero, который занимает полную ширину окна просмотра и полную высоту, минус высота панели навигации сайта. Если вы знаете высоту панели навигации, это легко сделать с помощью функции calc(). Скажем, например, что панель навигации имеет высоту 3rem:

hero { height: calc(100vh - 3rem); width: 100vw;
}

Единицы измерения, связанные с окном просмотра, для заголовков

Единицы, связанные с окном просмотра не только отлично подходят для больших элементов, таких как Hero-разделы, их также можно использовать для определения размеров элементов, таких как заголовки, в которых размер шрифта настраивается автоматически в зависимости от размера окна просмотра. Таким образом, мы можем избежать необходимости устанавливать множество контрольных точек с заданными размерами шрифтов, что упрощает правила стилей. Здесь, например, у нас задан размер шрифта для заголовка 5vw:

h1 { font-size: 5vw; text-align: center;
}

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

Или, в этом случае, мы можем исправить часть проблемы, используя единицы vmax, чтобы гарантировать, что наш заголовок не станет слишком маленьким. Здесь наш заголовок будет иметь размер шрифта 4% от наибольшего размера ширины или высоты области просмотра:

h1 { font-size: 4vmax; text-align: center;
}

Поддержка браузерами

Источник: https://alligator.io/

Редакция: Команда webformyself.