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

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

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

vh и vw

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

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

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

vmin и vmax

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Например, окно просмотра имеет ширину 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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree