Опубликовано:

Введение в CSS Viewport (Область просмотра)

Источник: «Introduction To CSS Viewports»
Новые viewport единицы измерения — интригующая и мощная функция, которую рассматривают для включения в CSS, и эта статья поможет узнать о них и о том, как ими пользоваться.

Рабочая группа CSS (CSSWG) выпустила пересмотренный рабочий проект спецификации CSS Values and Units Level 4 описывающий определение грамматики и типы значений. Новые единицы измерения viewport (области просмотра) — одна из интригующих функций, представленных в этой версии. В этой статье рассматриваются CSS единицы измерения viewport vw, vh, vmin и vmax. Я расскажу, как они функционируют с точки зрения макета, и чем они могут быть полезны при наборе текста.

Что такое области просмотра / Viewports

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

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

Областью просмотра можно управлять с помощью тега meta в разделе head HTML документа. Тег meta с именем viewport устанавливает размер и масштабирование области просмотра. Например:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

Методология

CSS предоставляет несколько методов для управления областью просмотра, включая свойства width и initial-scale мета тега viewport и медиа запросы. Свойство width устанавливает ширину области просмотра, а initial-scale устанавливает уровень масштабирования при первой загрузке страницы. Медиа запросы позволяют разработчикам применять разные стили к разным устройствам и размерам экрана.

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

Что такое единицы CSS

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

Также существуют другие единицы CSS, такие, как пункты (pt), дюймы (in), сантиметры (cm) и миллиметры (mm) в основном используемые в стилях печати.

Единицы vh и vw

vh и vw — единицы CSS, представляющие процент высоты и ширины области просмотра. Они позволяют изменять размер элементов относительно размера области просмотра, делая ваши проекты более чувствительными к разным размерам экрана.

Пример использования vh в CSS:

body {
  height: 100vh; /* 100% высоты области видимости */
}

h1 {
  font-size: 5vh;} /* 5% высоты области видимости */

Пример использования vw в CSS:

body {
  width: 100vw; /* 100% ширины области видимости */
}

.container {
  width: 50vw; /* 50% ширины области видимости */
  margin: 0 auto;
}

Что касается набора текста, использование единиц vh и vw может быть полезным, поскольку они позволяют определять размер элементов относительно области просмотра, а не использовать абсолютные единицы, такие как px.

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

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

Также стоит отметить, что единицы vh и vw являются частью спецификации CSS3, и поэтому хорошо поддерживаются современными браузерами.

vmax и vmin

vmax и vmin относятся к максимальному и минимальному вертикальному расстоянию гарнитуры/typeface или шрифта. Они используются при наборе текста, чтобы убедится, что размер шрифта соответствует заданному дизайну и помещается в отведённое место.

vmax устанавливает высоту самого высокого символа в шрифте, а vmin высоту самого низкого символа (обычно это нисходящие символы, такие как g или y). Эти значения помогают определить межстрочный интервал и общий вид текста.

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

С точки зрения кода, эти значения можно использовать в CSS для определения высоты строки и вертикального отступа для текстовых элементов. Например:

p {
  font-size: 16px;
  line-height: 1.2 * 16px;
  padding-top: (1.2 * 16px - Vmax) / 2;
  padding-bottom: (1.2 * 16px - Vmax) / 2;
}

Этот код устанавливает размер шрифта в 16px, а высоту строки в 1.2 раза больше размера шрифта. А верхнее и нижнее заполнение в виде разницы между 1.2-кратным размером шрифта и vmax, делённой на 2. Это помогает обеспечить правильное размещение текста и его выравнивание внутри контейнера.

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

Когда использовать единицы области просмотра

Знание того, как и когда использовать вещь, раскрывает её красоту. В этом разделе мы увидели, как использовать область просмотра/viewport; мы увидим, когда его использовать.

Отзывчивость

Эти единицы могут быть полезны, когда вы хотите изменить размер элементов таким образом, чтобы они масштабировались вместе с размером области просмотра. Например, вы можете использовать vw, чтобы установить ширину элемента равную 10% от ширины области просмотра:

element {
  width: 10vw;
}

Таким образом, ширина элемента будет автоматически регулироваться по мере изменения размера области просмотра. Аналогично можно использовать vh и vmin/vmax.

Спецификации высоты

Другим распространённым вариантом использования единиц области просмотра является указание высоты элементов, которые должны занимать всю высоту области просмотра, например полноэкранных фоновых изображений. Для сравнения, другие единицы CSS, такие, как px, em и rem, задают абсолютные значения и не реагируют на изменения размера области просмотра. По этой причине единицы области просмотра предпочтительнее при разработке отзывчивого макета, в то время как абсолютные единицы больше подходят для конкретных дизайнов с фиксированными размерами.

Фиксированное позиционирование

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

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10vh;
}

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

Полноэкранные секции

Единицы области просмотра также могут создавать полноэкранные секции на веб-странице, такие, как полноэкранные фоновые изображения. Например, вы можете использовать vh, чтобы установить высоту элемента равной 100% высоты области просмотра:

section {
  background-image: url(background.jpg);
  background-size: cover;
  height: 100vh;
}

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

Ограничения и потенциальные недостатки

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

Хотя единицы области просмотра полезны при создании отзывчивого дизайна, не все они поддерживаются в старых браузерах. Ниже приведён список браузеров, поддерживающих области просмотра:

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

Заключение

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

Предыдущая Статья

Почему async/await больше, чем синтаксический сахар

Следующая Статья

Написание более чистого CSS кода с помощью БЭМ