Html viewport minimum width

Введение в 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 , может быть более предпочтительным.

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

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

Заключение

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

Источник

Setting a minimum viewport width for responsive pages

My hobby recently has been making website scale better on phones, but I ran into a problem on several of them: The viewport meta tag assumes that a website either has a fixed width or that it scales to any possible width. I investigated several solutions and eventually settled on an (apparently) novel one: Check the screen size, and if it’s too small, add a new meta tag with a fixed viewport. I also wrote a JavaScript polyfill that lets me just set a min-width in the viewport tag.

Why I needed a different solution

• If I don’t set a viewport, mobile browsers will behave as if I set .
• If I set a static viewport with , it will render at 500px for all devices that support viewports, so a tablet with a 1024px screen will render at 2x scale (and it won’t be possible to zoom out).
• If I set a dynamic viewport with , it will render how I want it to, but it will also set the initial zoom to the device width. On a phone with a 320px viewport, it will start out zoomed in. It is possible to zoom out, but this is still a bad user experience.
• If I change the viewport meta tag’s content with JavaScript, Firefox will ignore it.
• I could use @viewport CSS device adaptation, but none of the major mobile browsers support it.

My solution

Changing the viewport meta tag was a good idea, and the only change I made is realizing that Firefox will use a viewport tag added in JavaScript. This means the trivial solution is to just add your tag with JavaScript:

But, having JavaScript in the header to deal with this isn’t ideal, so I experimented and found that as long as I remove the previous viewport, I can add another. With that in mind, I decided to just add the missing min-width attribute with a polyfill:

This just finds your viewport meta tag, checks if it contains min-width . If the min-width is less than the screen width, it replaces the meta tag with a fixed one.

If you want to use this in your own code, just get the JavaScript file from the GitHub repo and do this:

At some point I’ll probably make this polyfill support max-width , and also leave other attributes alone (although you really shouldn’t use any of the others, since preventing user scaling is annoying). If you want to implement any of this, feel free to send me a pull request.

Contact

To the extent possible under law, Brendan Long has waived all copyright and related or neighboring rights to this work.

Site powered by Pelican and Python. Logo by mountdesign.

Источник