What is viewport in css

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

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

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

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

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

• vw (viewport width / ширина области просмотра) — единица длинны, равная 1% от ширины области просмотра.
• vh (viewport height / высота области просмотра) — единица длинны, равная 1% от высоты области просмотра.
• vmin (viewport minimum / минимум области просмотра) — единица длинны равная меньшему из vw или vh .
• vmax (viewport maximum / максимум области просмотра) — единица длинны равная большему из значений vw или vh .

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

Областью просмотра можно управлять с помощью тега 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:

• Пиксели ( px ): фиксированная единица измерения, равная одному пикселю на экране.
• Проценты ( % ): относительная единица измерения, основанная на размере родительского элемента.
• Em ( em ): относительная единица измерения, основанная на размере шрифта родительского элемента.
• Rem ( rem ): относительная единица измерения, основанная на размере корневого шрифта документа.
• Единицы области просмотра ( vh , vw , vmin , vmax ): относительная единица измерения, основанная на размере области просмотра (видимая область веб-страницы).

Также существуют другие единицы 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% от ширины области просмотра:

Таким образом, ширина элемента будет автоматически регулироваться по мере изменения размера области просмотра. Аналогично можно использовать 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 , может быть более предпочтительным.

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

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

Заключение

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

Источник

Responsive Web Design — The Viewport

The viewport is the user’s visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

This was not perfect!! But a quick fix.

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the tag.

You should include the following viewport element in all your web pages:

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links above to see the difference.

Size Content to The Viewport

Users are used to scroll websites vertically on both desktop and mobile devices — but not horizontally!

So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.

Some additional rules to follow:

1. Do NOT use large fixed width elements — For example, if an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport.

2. Do NOT let the content rely on a particular viewport width to render well — Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.

3. Use CSS media queries to apply different styling for small and large screens — Setting large absolute CSS widths for page elements will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.

Источник