@viewport в CSS

Адаптивный веб-дизайн — Viewport

Что такое Viewport?

Окно просмотра видна область пользователя веб-страницы.

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

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

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

Это не было совершенным !! Но быстро исправить.

Установка вьюпорте

HTML5 ввел метод , чтобы позволить веб — дизайнерам взять под свой контроль над областью просмотра, через тега.

Вы должны включить следующую видовых элемент во всех ваших веб — страниц:

видовой экран элемент дает инструкции браузера о том , как контролировать размеры данной страницы и масштабирование.

w > часть задает ширину страницы , чтобы следить за экраном на ширину устройства (который будет варьироваться в зависимости от устройства).

initial-scale=1.0 часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Ниже приведен пример веб — страницы без окна просмотра мета — тегов и той же веб — странице с окном просмотра мета — тег:

Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на две ссылки , чтобы увидеть разницу.

Размер контента к иллюминатору

Пользователи используются для прокрутки веб-сайты вертикально на настольных и мобильных устройств — но не горизонтально!

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

Некоторые дополнительные правила, чтобы следовать:

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

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

3. С помощью CSS медиазапросы , чтобы применять различные стили для малых и больших экранов — Установка больших абсолютных ширины CSS для элементов страницы, заставит элемент слишком широк для просмотра на меньшем устройстве. Вместо этого следует использовать относительные значения ширины, например, ширина: 100%. Кроме того, будьте осторожны с использованием больших абсолютных значений позиционирования. Это может привести к тому элементу выходить за пределы окна просмотра на небольших устройствах.

Использование мета тега viewport в неадаптивных шаблонах

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

Обычное использование мета тега viewport

Обычно мета тег viewport используется для установки ширины и начального масштаба для окна просмотра на мобильных устройствах. Вот пример.

Использование мета тега viewport в неадаптивном шаблоне

По умолчанию ширина окна просмотра на iPhone устанавливается равной 980px. Но ваш дизайн может плохо соответствовать данному диапазону. Значение может быть для шаблона слишком большим или маленьким. Ниже приводится два примера. которые используют мета тег viewport для улучшения внешнего вида неадаптивного шаблона на мобильных устройствах.

Пример

Посмотрите на сайт Themify с мобильного устройства.

Левый снимок экрана демонстрирует внешний вид сайта без использования мета тега viewport . Можно заметить, что страница касается обеих сторон экрана. Если добавить мета тег viewport с указанием ширины 1024px, то будет оставаться зазор слева и справа.

Другой пример

Если ваш дизайн слишком узкий, то он тоже будет выглядеть коряво. Допустим, ширина контейнера 700px и он не адаптируется. В таком случае внешний вид будет как ниже приведенном слева снимке экрана — широкая белая полоса слева.

Проблему легко устранить установив ширину окна просмотра 720px. Ширина дизайна не изменяется, но мобильное устройство будет масштабировать его до 720px.

Общая ошибка

Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу. Самый плохой случай — сочетание user-scalable=no или maximum-scale=1 с initial-scale=1 . Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
Перевел: Сергей Фастунов
Урок создан: 10 Октября 2012
Просмотров: 242365
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

HTML: Viewport мета тег для не адаптивного дизайна сайта (non responsive design) опубликовал Радик Алиев категория HTML, CSS, jQuery
просмотры 52 338

Я уверен, что многие используют мета-тег Viewport для масштабирования дизайна, но знаете ли вы, что этот тег также может быть очень полезен для мобильных устройств? Если у вас нет времени, чтобы преобразовать ваш проект, тем не менее, вам следует прочитать эту статью о том, как использовать тег Viewport для улучшения внешнего вида вашего проекта на мобильных устройствах.

Главное использование тега Viewport

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

Использование тега Viewport для сайтов, не рассчитанных под мобильные устройства.

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

Взгляните на сайт Themify на iPhone.

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

Если ваш проект является слишком узким, это может также вызвать проблемы. Допустим, ширина контейнера вашего дизайна 700px, и это не правильно, это будет выглядеть как на скриншоте слева, где есть большое пустое пространство справа.

Вы можете просто исправить это, установив ширину окна в 720px. Ширина вашего дизайна не меняется, но iPhone будет масштабировать, чтобы поместиться в 720px.

Распространенная ошибка

Распространенной ошибкой является то, что люди часто добавляют initial — scale = 1 на не отвечающий размерам дизайн. Это делает страницу в масштабе 100% без масштабирования. Если ваш проект не помещается на экран, пользователям придется уменьшить масштаб, чтобы увидеть полную страницу. Еще хуже, когда объединяют user — scalable = no или maximum — scale = 1 с initial — scale = 1 . Это будет отключать возможность масштабирования. Пользователи не имеют возможности уменьшить размер страницы, чтобы увидеть ее.

Responsive Web Design — The Viewport

Что такое видовой экран?

Видовой экран — это видимая область пользователя веб-страницы.

Окно просмотра зависит от устройства и будет меньше на мобильном телефоне, чем на экране компьютера.

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

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

Это не было идеальным!! Но быстро исправить.

Настройка видового экрана

HTML5 ввел метод, позволяющий веб-дизайнерам управлять окном просмотра через тег .

На всех веб-страницах следует включить следующий элемент видового экрана:

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

w >часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет меняться в зависимости от устройства).

initial-scale=1.0 часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с мета-тегом видового экрана:

Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.

Размер содержимого для видового экрана

Пользователи используются для прокрутки веб-сайтов по вертикали на настольных и мобильных устройствах-но не горизонтально!

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

Некоторые дополнительные правила, которые следует соблюдать:

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

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

3. Использование CSS Media запросов для применения различных стилей для малых и больших экранов — Установка больших абсолютных ширины CSS для элементов страницы приведет к тому, что элемент будет слишком широк для видового экрана на устройстве меньшего размера. Вместо этого следует использовать значения относительной ширины, например ширину: 100%. Кроме того, будьте внимательны при использовании больших абсолютных значений позиционирования. Это может привести к тому, что элемент окажется вне видового экрана на небольших устройствах.

Responsive Websites: Setting the CSS Viewport Meta Tag

TL;DR — CSS viewport is the zone in a browser window that is visible at once without scrolling. Setting up the CSS viewport tag is the most effective way to improve how web pages look on smaller screens.

The concept of the viewport

The CSS viewport refers to the part of the website, which is visible in the browser window. Therefore, the viewport is usually not the same size as the actual page. Mobile phones and other devices with smaller screens display pages in a virtual window or viewport.

The main issue is that narrower screens make the virtual viewport shrink to display all areas of a web page. Therefore, some websites do not look good on mobile devices.

Manipulating the viewport

You might assume that setting media queries is enough to fix this issue. However, they might not help if the virtual viewport does not match the specified breakpoints.

Therefore, you should consider setting the meta viewport tag for changing the size and scaling viewports.

• w > part of the tag sets the width of the page to respond to the width of the screen.
• initial-scale=1.0 part of the tag sets the initial zoom level of the page.

This example uses the viewport tag:

These settings tell the browsers to display a website at the width of the screen of the device used. Therefore, if the screen width is 320px, the browser window will be the same.

Note: if your website is not created to be responsive, you should not use the viewport tag since it might create issues.

The CSS viewport tag accepts the following properties:

Mobile browsers manage the orientation changes differently. Mobile Safari simply zooms pages when the orientation changes to landscape. If you wish to keep settings of scale CSS, include the maximum-scale=1> value to prevent this behavior of mobile browsers.

В чем разница @media и @viewport?

SagePtr, Сергей Горностаев, Araya, вы случайно не путаете тот viewport что в CSS, с тем что в HTML мета name?

sim3x, Gene Hagmt, я бы не стал наверное пользоваться @viewport в CSS, у него поддержка, ещё или уже только в IE/EDGE кажется https://caniuse.com/#search=%40viewport ну и ещё в opera mini, если я правильно понимаю

не даром видать классический viewport emmet заталкивает в каждый html:

наверное они чтото знают.

мне кажется зря вы на ТС как тигры бросаетесь.

Если мне нужно проверить параметры девайса для появления правильных стилей, что следует использовать? И в чем вообще разница? А также, интересует разница между настройкой viewport’a в css и в html.

Привет! Спасибо за вопрос!
Их обоих объединяет то, что они называются at-rules https://developer.mozilla.org/en-US/docs/Web/CSS/A.
@media это объявление тела медиа-запроса
@viewport это правило задающее вьюпорт вместо html viewport (на стадии draft)
Вместо css вьюпорта, используйте тот что в html, в css это свойство находится ещё на стадии разработки

Когда-то давным-давным давно, в далёкой-далёкой галактике.

Разрешение экранов айфона стало громадным, и плотность пикселей тоже
Компания apple придумала в мета атрибуте name значение viewport

Чтобы научить браузеры рендерить веб-страницы состоящих из обычных пикселей в «СSS-пиксели»
Но, как вы можете понимать, оно относится к HTML а не к CSS
И W3C не нужно чтобы сущности, связанные с UI плодились в HTML

Поэтому W3C создал правило @viewport но, уже для CSS:

Разница между viewport-HTML и @viewport-CSS лишь в том, что его параметры вы задаёте уже в CSS, а не в HTML

@viewport заставляет по другому рендерить страницу, чтобы текст выглядел более сглажено и читабельно, в то время как @media запросы это просто ключи для построения уникальных css правил под разную высоту и ширину экранов

В завершении, @viewport должен будет покончить раз и навсегда с ненужными в HTML вкраплениями от UI, бороться за восстановление свободы HTML в галактике, который предназначен только для структуры а не внешнего вида….

Занимательная вёрстка с единицами измерения области просмотра

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

Что такое единицы измерения области просмотра?

Между 2011 и 2015 годами в спецификациях CSS, разработанных W3C, в 3-ем уровне модуля Значения и единицы CSS, появились четыре новые единицы, которые связаны непосредственно
с параметрами области просмотра. Новые единицы — vw, vh, vmin, и vmax — работают аналогично существующим единицам длины, таким как px или em, но представляют собой процентные величины от текущей области просмотра браузера.

• Viewport Width (vw) – это процентная величина от общей ширины области просмотра. 10vw представляет собой 10% от текущей ширины области просмотра, скажем, 48px на телефоне с экраном шириной 480px. Разница между % и vw наиболее сопоставима с отличием между единицами em и rem. Длина в % рассчитывается относительно ширины текущего контекста (контейнера), а длина vw — относительно общей ширины области просмотра браузера.

• Viewport Height (vh) — это процентная величина от общей высоты области просмотра. 10vh составляет 10% от текущей высоты области просмотра.

• Viewport Minimum (vmin) — это процентная величина от ширины или высоты области просмотра, в зависимости от того, которая из двух меньше. 10vmin соответствует 10% от текущей ширины области просмотра в книжной ориентации и 10% от высоты области просмотра в альбомной ориентации.

• Viewport Maximum (vmax) — это процентная величина от ширины или высоты области просмотра, в зависимости от того, которая из двух больше. 10vmin будет равняться 10% от текущей высоты области просмотра в книжной ориентации и 10% ширины области просмотра в альбомной ориентации. К сожалению и как бы странно это ни звучало, единица vmax еще не поддерживается браузерами Internet Explorer и Edge.

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

Отзывчивая типографика

Стало популярным использовать единицы измерения области просмотра в отзывчивой типографике — настраивать размер шрифта таким образом, чтобы он увеличивался и уменьшался в зависимости от текущего размера области просмотра. Использование единиц измерения области просмотра для определения размера шрифта имеет интересный (опасный) эффект. Как вы видите, шрифты масштабируются очень быстро — от нечитабельно-мелкого до крайне крупного размера в очень малом диапазоне.

Такое резкое масштабирование явно не подходит для повседневного использования. Нам нужно что-то более тонкое — минимальные и максимальные значения. Также нужно больше контроля над диапазонами увеличения показателя. Тут нам поможет функция calc(). Для определения базового размера шрифта мы можем использовать более стабильные единицы (скажем, 16px). Мы также можем уменьшить диапазон подстраивания значения под размер области просмотра (0.5vw). Таким образом, браузер будет выполнять следующие математические вычисления: calc(16px + 0.5vw)

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

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

Тут я поняла, что было бы здорово, если бы существовало такое свойство, как max-font-size.

Наши коллеги разработали более сложные расчеты и миксины Sass для определения точных диапазонов масштабирования размера текста через конкретные медиа-запросы. Есть несколько статей на CSS Tricks, в которых объясняется этот метод. Там же представлены фрагменты кода, которые помогут попробовать его в деле.

Я думаю, в большинстве случаев это излишне, но у вас может быть другое мнение.

Полноэкранные блоки, hero images и прилипающие футеры

Существует великое множество вариаций вёрстки во всю высоту окна (или подразумевающей ограничение по высоте) — от интерфейсов в стиле рабочего стола до hero images, широких макетов и прилипающих футеров. Единицы измерения области просмотра помогут вам со всем перечисленным.

В интерфейсе в полную высоту в стиле рабочего стола страница часто разбивается на разделы, которые скроллятся по отдельности. Такие элементы, как хедер, футер, боковые панели, остаются на месте при любом размере окна. Сегодня это обычная практика для многих веб-приложений, а единицы vh делают реализацию такого интерфейса гораздо проще. Ниже приведен пример с использованием нового синтаксиса CSS Grid:

Одно правило для body — height: 100vh — задает высоту вашему приложению равной высоте области просмотра. Убедитесь, что для элементов внутри body заданы значения overflow, чтобы их содержимое не обрезалось. Такой же вёрстки можно добиться, используя flexbox или плавающие элементы. Заметьте, что с вёрсткой в полную высоту в некоторых мобильных браузерах могут возникать проблемы. Есть хороший фикс для Safari на iOS, который мы используем для наиболее часто встречающихся нестандартных случаев.

Прилипающие футеры можно создать аналогичным образом. Все, что нужно — правило для body height: 100vh заменить на min-height: 100vh, и футер будет зафиксирован внизу экрана, до тех пор пока не сместится контентом вниз.

Используйте единицы vh для определения свойств height, min-height или max-height различных элементов и создавайте полноэкранные разделы, hero images и многое другое. В новом редизайне OddBird мы ограничили высоту hero images правилом max-height: 55vh, чтобы они не вытесняли заголовки со страницы. На моем собственном сайте я использовала правило max-height: 85vh, чтобы больше выделить изображения. На других сайтах я применила минимальную высоту — min-height: 90vh — к разделам.

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

Соотношение ширины и высоты для резиновой вёрстки

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

Если мы хотим растянуть наше видео на весь экран, мы можем задать его высоту относительно ширины области просмотра:

Такие расчеты не обязательно выполнять именно в браузере с поддержкой функции calc. Если вы используете препроцессор, как, например, Sass, того же эффекта можно добиться с помощью подобного расчета: height: 100vw * (9/16). Если вам нужно ограничить максимальную ширину, вы также можете ограничить максимальную высоту:

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

Крис идет дальше в своей статье, и мы последуем его примеру. Что если нам нужно, чтобы обычное текстовое содержимое HTML масштабировалось в пределах установленного соотношения, как часто бывает, например, со слайдами презентаций?

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

«Разрывая» контейнер

Уже многие годы мы используем текстовые блоки ограниченного размера на пару с фонами на всю ширину. В зависимости от разметки или CMS, здесь могут возникать проблемы. Как уйти от необходимости ограничивать содержимое размером контейнера, но обеспечить при этом точно такое же заполнение им окна браузера?

И снова нам помогут единицы измерения области просмотра. Вот еще один прием, который мы использовали на новом сайте OddBird, где генератор статического сайта иногда ограничивает наш контроль над разметкой. Для реализации данного замысла требуется всего несколько строк кода.

Есть более подробные статьи, посвященные данной технике, как на Cloud Four, так и здесь, на CSS Tricks.

Креативные реализации

Конечно, если вы попробуете поэкспериментировать, то с помощью единиц измерения области просмотра вы сможете сделать гораздо больше. Вот, например, этот индикатор прокрутки страницы (созданный неким Майком) сделан на чистом CSS и с применением единиц измерения области просмотра на фоновом изображении:

А что еще интересного вы слышали о единицах измерения области просмотра или как еще использовали их в своей работе? Попробуйте подключить воображение в своей работе и покажите нам свои результаты!

Оригинальная статья: Fun with Viewport Units by Miriam Suzanne

Основы отзывчивого веб-дизайна

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

Responsive Web Design

In this course you’ll learn the fundamentals of responsive web design with Google’s Pete LePage! You’ll create your own responsive web page that works well on any device — phone, tablet, desktop or anything in between.

You’ll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you’ll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you’ll experiment with major and minor breakpoints, and optimizing text for reading.

This is a free course offered through Udacity

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

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

Настройка области просмотра

Страницы, адаптированные для просмотра на разных устройствах, должны содержать в контейнере head метатег viewport. Он сообщает браузеру, каким образом нужно контролировать размеры и масштаб страницы.

• Чтобы контролировать масштабирование окна просмотра в браузере, используйте метатег viewport.
• Добавьте w >, чтобы адаптировать ширину окна просмотра к экрану устройства.
• Вставьте initial-scale=1 , чтобы обеспечить соотношение 1:1 между пикселями CSS и независимыми пикселями устройства.
• Чтобы страница была доступна, проверьте, не отключено ли пользовательское масштабирование.

Пытаясь улучшить работу с сайтами, мобильные браузеры отображают страницу·той же ширины, что и на экране ПК (обычно она составляет около 980 пикселей, но на разных устройствах может отличаться). После этого браузер увеличивает размер шрифтов и изменяет размер контента, чтобы уместить страницу на экране. В результате пользователи видят разные шрифты, и для работы с сайтом им приходится увеличивать его масштаб.

Чтобы страница подстроилась под ширину нужного экрана (в независимых пикселях), используйте метатег viewport w >. С его помощью размер и положение контента изменятся, и сайт будет хорошо смотреться на любом устройстве.

Некоторые браузеры не редактируют ширину страницы и размер контента, а изменяют ориентацию сайта на альбомную или увеличивают масштаб. С помощью атрибута initial-scale=1 можно указать браузеру соотношение пикселей CSS и устройства, равное 1:1 независимо от ориентации дисплея. Благодаря этому страница будет лучше выглядеть в альбомной ориентации.

Специальные возможности области просмотра

Настроив initial-scale, вы также можете установить следующие атрибуты для области просмотра:

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

Масштабирование контента для области просмотра

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

• Не используйте крупные элементы с фиксированной шириной.


• Для корректного отображения контента не ограничивайте его определенной шириной области просмотра.
• Используйте медиазапросы CSS, чтобы указать разные стили для больших и маленьких экранов.

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

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

Установка больших абсолютных значений ширины CSS для компонентов страницы сделает div слишком большим для более узкой области просмотра (например, на устройствах шириной 320 пикселей CSS, таких как iPhone). Вместо этого можно использовать значения в относительных единицах, например width: 100%. Также старайтесь избегать больших абсолютных значений позиционирования. Из-за них на маленьком экране элемент может оказаться эа пределами области просмотра.

Улучшение отзывчивости с помощью медиазапросов CSS

Медиазапросы — это простые фильтры, которые можно применять к стилям CSS. Они позволяют изменять стили на основании характеристик устройства, связанных с отображением контента, включая тип, ширину, высоту, ориентацию и даже разрешение экрана.

• Медиазапросы также позволяют выбрать стиль на основе характеристик устройства.
• Добавьте min-width вместо min-device-width для корректного отображения сайта на большинстве устройств.
• Чтобы не нарушать структуру макета, используйте элементы относительных размеров.

Например, вы можете поместить в медиазапрос print все стили, необходимые для печати:

Кроме использования атрибут media в ссылке на таблицу стилей существует ещё два способа применить медиазапросы @media и @import, которые можно встроить в файл CSS: Приоритет отдается первым двум методам, более эффективным, чем синтаксис @import (см. Избегайте правила @import).

Логика медиазапросов не является взаимоисключающей, поэтому к блоку CSS применяются все фильтры, отвечающие его критериям. Порядок применения фильтров обусловлен стандартными правилами CSS.

Применение медиазапросов на основе размера области просмотра

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

В отзывчивом веб-дизайне наиболее часто используются функции min-width, max-width, min-height и max-height (хотя возможны и другие запросы).

• При ширине браузера от 0 пикс. до 640 пикс. применяется max-640px.css.
• При ширине браузера от 500 пикс. до 600 пикс. применяются стили из @media.
• При ширине браузера от 640 пикс. и выше применяется min-640px.css.
• Если в браузере ширина больше высоты, применяется landscape.css.
• Если в браузере высота больше ширины, применяется portrait.css.

Примечание к min-device-width

Также возможно создание запросов на основании *-device-width, хотя делать это настоятельно не рекомендуется.

Разница небольшая, но очень важная: min-width исходит из размера окна браузера, а min-device-width — из размера экрана устройства. К сожалению, некоторые браузеры (включая устаревшую версию браузера для Android) не всегда правильно определяют ширину области просмотра и вместо нее могут сообщить размер экрана в пикселях устройства.

К тому же, использование *-device-width может помешать контенту подстроиться под экран обычного компьютера или другого устройства, на котором можно изменить размер окна. Причина в том, что этот запрос основан на размере конкретного устройства, а не окна браузера.

Использование относительных единиц

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

Например, установка параметра width равным 100% для блока div верхнего уровня приведет к тому, что он будет заполнять всю ширину области просмотра и никогда не будет слишком мал или велик для нее. Блок div в любом случае будет соответствовать экрану, будь то iPhone (320 пикс.), Blackberry Z10 (342 пикс.) или Nexus 5 (360 пикс.).

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

Not recommended — fixed width

Recommended — responsive width

Выбор контрольных точек

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

• Создавайте контрольные точки на основе контента, а не для отдельных устройств, продуктов или брендов.
• Сначала разработайте дизайн для самого маленького мобильного устройства, а затем переходите к версиям для больших экранов.
• Ограничьте длину строк 70-80 символами.

Выбор главных контрольных точек: от меньшего к большему

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

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

Затем увеличим размер окна браузера, пока между элементами не появится слишком много пустого пространства. Теперь прогноз погоды выглядит не так красиво. Вы можете выбрать любое значение, но 600 пикселей — это слишком много.

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

В конце проведите рефакторинг CSS. В этом примере мы поместили общие стили (шрифты, значки, цвета и базовое позиционирование) в weather.css. Затем мы включили макет для маленьких экранов в weather-small.css, а для больших — в weather-large.css.

Выбор второстепенных контрольных точек (если необходимо)

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

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

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

Оптимизация текста для чтения

Согласно распространенной теории, самой удобной для чтения является колонка с длиной строки около 70-80 знаков (8-10 слов). Поэтому для всех текстовых блоков, ширина которых превышает 10 слов, следует установить контрольную точку.

Рассмотрим подробнее приведенный выше пример записи в блоге. На маленьком экране отлично помещаются строки длиной в 10 слов шрифтом Roboto с размером 1em, но для экранов большего размера необходимо установить контрольную точку. В этом случае для окна просмотра браузера размером больше 575 пикселей оптимальная ширина контента равна 550 пикселям.

Никогда не скрывайте контент полностью

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

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

CSS вьюпорт единицы измерения: быстрый старт

Дата публикации: 2020-04-04

От автора: с первого показа вьюпорт единиц в CSS прошло несколько лет. Это реально адаптивные единицы измерения длины, их значение меняется под размеры окна браузера. Если вы слышали о них, но никогда не вдавались в детали, эта статья для вас.

Единицы измерения и их значение

В CSS есть 4 типа вьюпорт единиц: vh, vw, vmin и vmax.

Viewport height (vh) – основаны на высоте вьюпорта. Значение 1vh равно 1% высоты вьюпорта.

Viewport width (vw) – основаны на ширине вьюпорта. Значение 1vw равно 1% ширины вьюпорта.

Viewport minimum (vmin) – основаны на минимальной стороне вьюпорта. Если высота вьюпорта меньше ширины, значение 1vmin будет равно 1% от высоты. Точно так же если ширина меньше высоты, то 1vmin будет равен 1% от ширины вьюпорта.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Viewport maximum (vmax) – основаны на большой стороне вьюпорта. Если высота вьюпорта больше ширины, то значение 1vmax будет равно 1% от высоты вьюпорта. Если ширина вьюпорта больше высоты, то 1vmax будет равен 1% от ширины.

Давайте посмотрим, какие значения мы получим в разных ситуациях:

Если вьюпорт 1200px в ширину и 1000px в высоту, то значение 10vw будет равно 120px, а 10vh – 100px. Ширина вьюпорта больше высоты, поэтому 10vmax будет равно 120px, а 10vmin – 100px.

Если повернуть устройство, чтобы ширина стала 1000px, а высота 1200px, то 10vh будет равно 120px, а 10vw превратится в 100px. Интересно, но 10vmax так и останется 120px, потому что теперь значение определяется по высоте вьюпорта. Значение 10vmin также останется 100px.

Если сузить окно браузера до 1000px в ширину и 800px в высоту, то 10vh будет 80px, а 10vw будет 100px. Точно так же значение 10vmax станет 100px, и 10vmin – 80px.

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

В демо видно, как ширина первого дочернего элемента занимает 80% ширины от родителя. У второго дочернего элемента ширина равна 80vw, что делает его шире родителя.

Применение вьюпорт единиц измерения

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

Полноэкранные фоновые изображения и секции

В сети довольно часто можно встретить фоновые изображения на элементах, которые занимают весь экран. Точно так же можно сделать в дизайне сайта, чтобы отдельная секция о товаре или услуге занимала весь экран. В таких случаях можно задать ширину элементов в 100%, а высоту в 100vh.

Разберем следующий пример HTML:

CSS ниже растянет секцию под фоновое изображение на всю ширину:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Идеально подходящие заголовки

Вы могли слышать или даже использовать jQuery плагин FitText . С помощью этого плагина можно масштабировать заголовки таким образом, чтобы они занимали всю ширину родительского элемента. Как я сказала раньше, значение вьюпорт единиц напрямую зависит от размеров вьюпорта. То есть если указывать font-size заголовков во вьюпорт единицах, то они идеально будут подходить под каждый экран. Если изменится ширина вьюпорта, браузер автоматически изменит заголовок. Нужно лишь определить правильное первоначальное значение для font-size.

Главная проблема с font-size и вьюпорт единицами заключается в том, что размер текста будет сильно варьироваться в зависимости от вьюпорта. Например, font-size со значением 8vw сделает заголовок размером в 96px для вьюпорта с шириной 1200px, 33px для ширины в 400px и 154px для ширины вьюпорта в 1920px. Шрифт может быть, как слишком большим, так и слишком маленьким для удобного чтения. Более подробно прочитать о правильной установке размеров текста с помощью единиц измерения и функции calc() можно в замечательной статье о типографике на вьюпорт единицах .

Легкое центрирование элементов

Вьюпорт единицы могут очень сильно помочь, когда необходимо поместить элемент точно в цент экрана пользователя. Если высота элемента известна, то нужно всего лишь задать верхнее и нижнее значение свойства margin в [(100 — height)/2]vh.

Мета-тег viewport

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

Свойство width указывает, под каким размером отображать сайт. Если указать w >, то мобильное устройство отобразит сайт в ширину 600 пикселей. Значение device-width означает, что надо отображать сайт под размер текущего мобильного устройства.

В свойстве initial-scale указывается масштаб страницы. Значение 1 означает масштаб 100%.

Первый браузер, который стал использовать мета тег viewport , стал Safari.

Запретить масштабирование в мобильных устройствах

Запретить масштабирование в мобильных устройствах можно через два свойства:

1. maximum-scale — максимальный размер масштабирования;
2. user-scalable — разрешать масштабирование.