Viewport для адаптивной верстки: Адаптация сайта на мобильных устройствах — студия Палыча

Адаптация сайта на мобильных устройствах — студия Палыча

Для просмотра на мобильных устройствах, используется метатег viewport. Он сообщает браузеру, каким образом нужно контролировать отображение сайта на мобильных устройствах (к ним так же относятся и планшетные компьютеры).

Этот метатег вставляют в контейнер head вашего сайта.

<meta name="viewport" content="width=device-width">

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

Для более детальной настройки отображения используем дополнительные значения

Ширина сайта на экранах мобильных устройств

Позволяет адаптировать ширину сайта под ширину экрана устройства

<meta name="viewport" content="width=device-width">

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

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

<meta name="viewport" content="width=600">

А в css шаблона впишем правило медизапроса при котором будут применяться стили при ширине экрана 600px. А так как мы задали именно это разрешение для отображения на экранах в мобильных устройствах, то будут использоваться стили указанных в заданных нами правилах. Общие стили будут применяться так же как и на обычном мониторе, но если мы какие либо стили указали в правилах, то эти стили будут заменяться дефолтными.

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

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

@media screen and (max-width: 600px) {
    …
}

Высота сайта на экранах мобильных устройств

В некоторых мобильных браузерах при интерполяции страницы сайта высота сайта отображается не корректно.

Для исправления этой ошибки мы можем использовать правило

<meta name="viewport" content="height=device-height"> 

Масштабирование сайта на экранах мобильных устройств

С помощью этого правила мы можем разрешать либо запрещать мастабирование страницы сайта.

Разрешить масштабирование на смартфоне:

<meta name="viewport" content="user-scalable=yes">

Запретить масштабирование на мобильном телефоне:

<meta name="viewport" content="user-scalable=no">

Подитог

И так мы создали свой viewport и так же для него создали медиапзапрос

В наш медиазапросе создали необходимые для нас стили. Что у нас вышло видим на рис.3 либо по ссылке (заходим с мобильных устройств)

Viewport:

<meta name="viewport" content="height=device-height,width=600,user-scalable=yes">

Медиазапрос:

@media screen and (max-width: 600px) {
    body {
        font-size:1.5em;
    }
    …
    h3 {
        font-size:2.
  5em;
    }
}

Верный viewport

Прошло уже 5 лет с момента первой нашей верстки под мобильные устройства и получили новый опыт. В итоге пришли к простому, но бронебойному viewport для сайтов:

<meta name="viewport" content="width=device-width, user-scalable=yes">

Читайте также

1. Фреймворк для адаптивной верстки
2. Адаптивная верстка для мобильных устройств

Как построить соответствующий стандартам адаптивный дизайн с помощью @viewport

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

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

К счастью, W3C вновь пришел к нам на помощь, введя @viewport в CSS правила.

Как было раньше

Используя старый мета-тег, мы сообщаем браузеру, какого размера вьюпорт должен рассматриваться:

<meta name='viewport' content='width=device-width'>

Новое CSS правило

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

W3C решение в CSS выглядит так:

@viewport {
    width: device-width;
}

или альтернативно, вы можете установить окно просмотра с числом, вот так:

@viewport {
    width: 640px;
}

Вы можете использовать @viewport правило в сочетании с @media запросами, чтобы заставить любое окно больше чем 960px сократится до 960px, вот так:

@media screen and (min-width: 960px){
    @viewport {
        width: 960px;
    }
}

Дополнительные свойства

Правило @viewport, также позволяет увеличить указанную страницу по умолчанию, и даже установить максимальный зум:

@viewport {
    width: 960px;
    zoom: 1;
    max-zoom: 3;
}

Масштабирование можно заблокировать целиком, путем установки user-zoom свойства на fixed (фиксированную). Однако масштабирование, особенно на смартфонах, необходимо для доступности, поэтому лучше не использовать это свойство.

Еще одно очень полезное свойство, которое позволяет зафиксировать нашу веб-страницу в ландшафтном или портретном режиме:

@viewport {
    orientation: landscape;
}

Вот и все основные понятия про viewport. Теперь закрепите свои знания в ваших новых проектах!

Высоких конверсий!

11-03-2016

10 технологий для адаптивной верстки текста о которых вы могли не знать — bool.dev

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

Адаптивный LESS 

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

Использование параметра VW(viewport)

 В этом примере блок vw используется для автоматического форматирования текста в соответствии с шириной окна просмотра. И это фактически поддерживается (по крайней мере частично), вплоть до IE 11.

Текст в одну строку который всегда хорошо смотрится

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

Одинаковые вертикальные отступы

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

Управление повторяющимися параметрами

Свойства CSS (так называемые «переменные») являются функцией «must-have», которую разработчику стоит использовать для оптимизации кода. Они работают подобно переменной в PHP или JavaScript, поскольку их можно вызвать в любое время и избавить вас от тонны повторения. Вот пример, который использует переменные вместе с функцией CSS calc для автоматического изменения размера текста.

Адаптивный текстовый слайдер

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

Еще один способ оставить текст на одной строке под размер экрана

В то время как мы ранее смотрели на пример, который сохранял текст в одной строке по размеру экрана, этот отличается тем, что при необходимости перемещает элементы в новую строку. Тем не менее, он все равно будет обеспечивать нужный вид текста Responsive Text Auto-scale text

Адаптивный SASS

Мы уже посмотрели на LESS, так что мы должны отдать SASS и некоторую любовь. Это обеспечивает очень плавный переход в размере текста при изменении области просмотра.

Адаптация от количества символов

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

Итог:

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

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

Как настроить мета-тег viewport для адаптивных и неадаптивных шаблонов

Приходилось ли вам сталкиваться с такой ситуацией: заходите вы на страничку интернет-магазина или клиники с мобильного телефона, чтобы посмотреть прайс-лист, а последний столбик в таблице (тот самый, где отображается стоимость) не видно?

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

Понятие о viewport

Viewport ─ это часть страницы, доступная посетителю без прокрутки.

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

Чтобы страничка адаптировалась к устройству и контент можно было адекватно просматривать, нужно вставить мета-тег viewport HTML-код сайта.

Прописываем мета-тег viewport

Для этого добавляем определенный код в раздел <head>.  

Прописать meta viewport для адаптивных страниц

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

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

• width=device-width делает ширину видимой области такой же, как и ширина экрана гаджета;
• initial-scale отвечает за ее первоначальный масштаб (коэффициент 1 говорит о том, что он равен 100%).

Meta viewport на неадаптивных шаблонах

Не рекомендуется использовать initial-scale, так как изображение страницы будет «съезжать»:

 Используем код:

<meta name="viewport" content="width=device-width">

Ширина по умолчанию — 980 пикселей (px). Однако шаблон не всегда соответствует ему. Чтобы это исправить, придется вручную подбирать значение ширины.

1. Если страница выходит за поля девайса справа и слева, используем значение 1024px: 

   <meta name="viewport" content="width=1024">

2. Страница слишком узкая, ─ 720px:

<meta name="viewport" content="width=720">

Какие еще параметры есть в meta viewport

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

• minimal-scale ─ минимальный масштаб окна;
• maximal-scale ─ максимальный масштаб окна;

Имеют числовые значения от 0.1 до 10. Значение 1.0 не изменяет масштаб:

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

• user-scalable ─ разрешает или запрещает пользователю изменять масштаб окна;

Имеет значения «yes» и «no» (по умолчанию задано «yes»).

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• orientation ─ управляет ориентацией;

Имеет значения auto (в зависимости от ориентации девайса), landscape (горизонтальная) и portrait (портретная). Auto по умолчанию.

• height ─ отвечает за высоту страницы;

Задается числовое значение от 200 до 10000px, либо устанавливается автоматический подгон под размер экрана с помощью device-height.

Частая ошибка

Некоторые разработчики используют для неадаптивных страниц атрибуты user-scalable=no или initial-scale=1 вместе с maximum-scale=1. Это отключает масштабирование, и посетитель не может увидеть всю страницу.

Пользовались мета-тегом viewport? Пишите отзывы в комментариях!

CSS3: Viewport — Новые элементы для адаптивного дизайна

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

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

Viewport значения для определенного размера
Значения „vw“ и „vh“ определяют ширину/высоту относительно размера окна. Мы использует „vw“ для представление ширины и „vh“ для представление высоты. Этот так называемый viewport позволяет нам определять размеры относительно окна браузера.

div {
width: 50vw;
height: 100vh;
}

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

        div { height: 50vw; }

Пример определяет высоту элемента от 50% ширины окна. Так масштабирование ширины окна приведет к изменению высоты элемента.

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

        h2 { font-size: 10vw; }

В примере определен размер шрифта как 10% от ширины окна. Благодаря «vw» размер шрифта для «h2» будет всегда подстраиваться относительно окна браузера.

Поддержка браузеров
Самым главным момент является то, что viewport поддерживаются всему популярными браузерами. Даже Internet Explorer может корректно отображать элементы, по крайней мере, начиная с версии 10, Firefox добавил поддержку с версии 19, Chrome с версии 20.

Оригинал статьи

Использование мета-тега Viewport

Тег meta viewport позволяет масштабировать веб-страницу для мобильных устройств. Чтобы понять принцип работы данного тега, рассмотрим пример. Создадим HTML-страницу следующего содержания:

<!DOCTYPE html>
<html>
 <head>
  <title>Конструктор сайтов "Нубекс"</title>
  <meta charset="utf-8">
  <style>
	body {
	background-color: #fa8e47;
	color: #fff;	
	}	
	#about {
	width:100%;
	}
  </style>
 </head>
 <body>
  <center>
  <div>
	<img src="http://nubex.ru/templates/nubexsite/img/nubex.png" />
	<h2>Уникальный конструктор сайтов для бизнеса</h2>
	<p>Ни один другой шаблонный сайт не сможет выглядеть столь оригинально, как конструктор сайтов «Нубекс». </p>
  </div>
  </center>
 </body>
</html>

Посмотрим, как будет отображаться наша страница на мобильном устройстве:

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

Мы уже говорили о создании мобильной версии сайта (читайте статью Как сделать мобильную версию сайта), а теперь рассмотрим конкретную реализацию — с чего начать мобильную верстку. Как вы уже догадались, речь идет о масштабировании, и здесь нам на помощь приходит тег meta name viewport. Работает он следующим образом:

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

Из синтаксиса тега понятно, что тег указывает браузеру на то, чтобы в качестве ширины области просмотра использовалась ширина экрана устройства (а не значение браузера по умолчанию, которое обычно составляет 980px). Также в этой записи инициализируется масштаб страницы (initial-scale=1.0).

Добавим вышеуказанную запись между тегами <head></head> в нашем примере и зайдем на страницу снова с мобильного устройства:

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

Отзывчивый дизайн — Изучение веб-разработки

На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивного) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т. д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

В какой-то момент истории при разработке веб-сайта у вас было два варианта:

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

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

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

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

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

Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.

Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.

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

Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.

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

Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трёх методов в сочетании.

1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта — Fluid Grids (опубликовано в 2009 в A List Apart).
2. Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100%, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
3. Третьим ключевым компонентом были медиавыражения. Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.

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

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

Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
} 

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

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

Узнать больше о медиавыражениях можно в документации MDN.

Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развёрнутым до максимума окном.

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

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

target / context = result 

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

.col {
  width: 6.25%; 
} 

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

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

На более широких экранах они перемещаются в два столбца:

Современные методы макетов такие как Макет с несколькими столбцами, Flexbox, и Grid являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.

Multicol

Самый старый из этих методов — это multicol, когда вы задаёте column-count, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.

.container {
  column-count: 3;
} 

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

.container {
  column-width: 10em;
} 

Flexbox

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

В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.

.container {
  display: flex;
}

.item {
  flex: 1;
} 

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

CSS grid

В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
} 

Примечание: версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: пример, исходный код.

Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:

img {
  max-width: 100%;
} 

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

Отзывчивые изображения, используя элемент <picture> и атрибуты srcset и sizes элемента <img> оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.

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

Вы можете найти подробное руководство по отзывчивым изображениям в разделе изучения HTML на MDN.

Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографики. Главным образом, она описывает изменение размеров шрифта в зависимости от ширины экрана при помощи медиавыражений.

В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум 1200px.

html {
  font-size: 1em;
}

h2 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h2 {
    font-size: 4rem;
  }
} 

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

В мобильных версиях заголовок меньше:

На компьютерах, однако, мы видим больший размер заголовка:

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

Using viewport units for responsive typography

An interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

h2 {
  font-size: 6vw;
}

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.

There is a solution, and it involves using calc(). If you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

h2 {
  font-size: calc(1.5rem + 3vw);
}

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

If you look at the HTML source of a responsive page, you will usually see the following <meta> tag in the <head> of the document.

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

This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

Why is this needed? Because mobile browsers tend to lie about their viewport width.

This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.

The trouble is that your responsive design with breakpoints and media queries won’t work as intended on mobile browsers. If you’ve got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you’ll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple’s default width=960px with the actual width of the device, so your media queries will work as intended.

So you should always include the above line of HTML in the head of your documents.

There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.

• initial-scale: Sets the initial zoom of the page, which we set to 1.
• height: Sets a specific height for the viewport.
• minimum-scale: Sets the minimum zoom level.
• maximum-scale: Sets the maximum zoom level.
• user-scalable: Prevents zooming if set to no.

You should avoid using minimum-scale, maximum-scale, and in particular setting user-scalable to no. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.

Note: There is a CSS @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. When both are used the meta tag overrides @viewport.

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

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

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

12 февраля 2019 г. • Обновлено 14 мая 2020 г.

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

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

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

Установите область просмотра #

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

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

   
  
  
… 
    
 … 
  
… 
  

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

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

Внимание : Чтобы старые браузеры могли правильно анализировать атрибуты, используйте запятую для разделения атрибутов.

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

Обеспечьте доступность видового экрана #

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

• минимальный масштаб
• максимальный масштаб
• пользователь -scalable

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

Размер содержимого в соответствии с областью просмотра #

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

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

Контент имеет неправильный размер для области просмотра. Аудит Lighthouse может помочь вам автоматизировать процесс обнаружения переполненного контента.

Images #

Изображение имеет фиксированные размеры, и если оно больше, чем область просмотра, появится полоса прокрутки.Распространенный способ решения этой проблемы — присвоить всем изображениям максимальную ширину , равную 100% . Это приведет к уменьшению изображения до размера имеющегося в нем пространства, если размер области просмотра будет меньше, чем изображение. Однако, поскольку max-width , а не width составляет 100% , изображение не будет растягиваться больше, чем его естественный размер. Как правило, безопасно добавлять в таблицу стилей следующее, чтобы у вас никогда не было проблем с изображениями, вызывающими полосу прокрутки.

  img {
 max-width: 100%; 
 дисплей: блочный; 
}  

Добавьте размеры изображения в элемент img #

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

Layout #

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

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

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

Современные методы компоновки CSS, такие как Flexbox, Grid Layout и Multicol, значительно упрощают создание этих гибких сеток.

Flexbox #

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

  .items {
 дисплей: гибкий; 
 justify-content: пробел между; 
}  

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

Подробнее о Flexbox.

CSS Grid Layout #

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

 . Контейнер {
 дисплей: сетка; 
 сетка-шаблон-столбцы: 1fr 3fr; 
}  

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

Подробнее о макете сетки CSS

Макет с несколькими столбцами #

Для некоторых типов макета можно использовать макет с несколькими столбцами (Multicol), который может создавать гибкое количество столбцов со свойством column-width .В демонстрации ниже вы можете видеть, что столбцы добавляются, если есть место для другого столбца 200px .

Подробнее о Multicol

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

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

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

   
  
 < head> 
… 
    
… 
  
…  

В качестве альтернативы вы можете включить стили печати в свою основную таблицу стилей с помощью медиа-запроса:

  @media print {
}  

Также можно включить отдельные таблицы стилей в ваш основной файл CSS, используя синтаксис @import , @import url (print.css) печать; , однако это использование не рекомендуется по соображениям производительности. Дополнительные сведения см. В разделе Избегайте импорта CSS.

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

Медиа-запросы на основе размера области просмотра #

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

• ширина ( минимальная ширина , максимальная ширина )
• высота ( минимальная высота , максимальная высота )
• ориентация
• соотношение сторон

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

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

Медиа-запросы на основе возможностей устройства #

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

• hover
• pointer
• any-hover
• any-pointer

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

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

Использование

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

Как выбрать точки останова #

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

Выберите основные точки останова, начав с малого, а затем продолжив работу #

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

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

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

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

  @media (max-width: 600px) {
} 
 
 @media (min-width: 601px) {
 
} 
  

Наконец, проведите рефакторинг CSS. Внутри медиа-запроса для max-width 600px добавьте CSS, который предназначен только для маленьких экранов.Внутри медиа-запроса для min-width 601px добавьте CSS для больших экранов.

Выбирать второстепенные точки останова при необходимости #

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

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

  @media (min-width: 360px) {
 body {
 font-size: 1.0em; 
} 
} 
 @media (min-width: 500px) {
 .seven-day-fc .temp-low, 
 .seven-day-fc .temp-high {
 display: inline-block; 
 ширина: 45%; 
} 
 
.seven-day-fc .seven-day-temp {
 маржа слева: 5%; 
} 
 
 .seven-day-fc .icon {
 width: 64px; 
 высота: 64 пикс; 
} 
} 
  

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

  @media (min-width: 700px) {
 .weather-прогноз {
 width: 700px; 
} 
}  

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

Классическая теория читабельности предполагает, что идеальный столбец должен содержать от 70 до 80 символов в строке (примерно от 8 до 10 слов на английском языке).Таким образом, каждый раз, когда ширина текстового блока превышает 10 слов, подумайте о добавлении точки останова.

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

  @media (min-width: 575px) {
 статья {
 width: 550px; 
 крайнее левое: авто; 
 поле справа: авто; 
} 
}  

Избегайте простого скрытия содержимого #

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

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

Чтобы просмотреть страницу с разными точками останова:

Откройте DevTools и включите режим устройства.По умолчанию он открывается в адаптивном режиме.

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

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

Использование метатега области просмотра для управления макетом в мобильных браузерах — HTML: язык гипертекстовой разметки

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

Устройства с узким экраном (например, мобильные устройства) отображают страницы в виртуальном окне или окне просмотра, которое обычно шире, чем экран, а затем сжимают результат визуализации, чтобы его можно было увидеть сразу. Затем пользователи могут панорамировать и масштабировать, чтобы увидеть различные области страницы. Например, если экран мобильного устройства имеет ширину 640 пикселей, страницы могут отображаться с виртуальным окном просмотра 980 пикселей, а затем он будет уменьшен до размера 640 пикселей.

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

Введите метатег области просмотра

Однако этот механизм не так хорош для страниц, оптимизированных для узких экранов с использованием медиа-запросов — например, если виртуальное окно просмотра составляет 980 пикселей, медиа-запросы с разрешением 640 или 480 пикселей или меньше никогда не будут использоваться, ограничивая эффективность таких методов адаптивного дизайна.

Чтобы смягчить эту проблему виртуального окна просмотра на устройствах с узким экраном, Apple представила «метатег области просмотра» в Safari iOS, чтобы веб-разработчики могли управлять размером и масштабом области просмотра. Многие другие мобильные браузеры теперь поддерживают этот тег, хотя он не является частью какого-либо веб-стандарта. Документация Apple хорошо объясняет, как веб-разработчики могут использовать этот тег, но нам пришлось провести некоторую детективную работу, чтобы точно выяснить, как реализовать его в Fennec. Например, в документации Safari говорится, что содержимое представляет собой «список с разделителями-запятыми», но существующие браузеры и веб-страницы используют любое сочетание запятых, точек с запятой и пробелов в качестве разделителей.

Узнайте больше о видовых экранах в различных мобильных браузерах в «Сказке о двух видовых экранах» на сайте quirksmode.org.

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

Свойство width управляет размером области просмотра. Он может быть установлен на определенное количество пикселей, например width = 600 , или на специальное значение device-width , которое представляет собой ширину экрана в пикселях CSS в масштабе 100%.(Существуют соответствующие значения height и device-height , которые могут быть полезны для страниц с элементами, которые изменяют размер или положение в зависимости от высоты области просмотра.)

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

Использование , масштабируемое пользователем = нет , может вызвать проблемы с доступностью для пользователей с нарушениями зрения, такими как слабовидение.

В последние годы разрешение экрана возросло до размера, при котором отдельные пиксели трудно различить человеческим глазом. Например, современные смартфоны обычно имеют 5-дюймовые экраны с разрешением выше 1920–1080 пикселей (~ 400 точек на дюйм). Из-за этого многие браузеры могут отображать свои страницы с меньшим физическим размером, переводя несколько аппаратных пикселей для каждого «пикселя» CSS. Первоначально это вызывало проблемы с удобством использования и удобочитаемостью на многих веб-сайтах, оптимизированных для сенсорного ввода. Питер-Пол Кох писал об этой проблеме в «Пиксель - это не пиксель».

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

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

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

Соотношение пикселей по умолчанию зависит от плотности отображения. На дисплее с плотностью менее 200 точек на дюйм соотношение составляет 1,0. На дисплеях с плотностью от 200 до 300 точек на дюйм соотношение составляет 1,5. Для дисплеев с плотностью более 300 точек на дюйм отношение представляет собой целочисленное значение пола (, плотность, /150 точек на дюйм). Обратите внимание, что соотношение по умолчанию истинно только тогда, когда масштаб области просмотра равен 1. В противном случае соотношение между пикселями CSS и пикселями устройства зависит от текущего уровня масштабирования.

Сайты могут устанавливать для своего окна просмотра определенный размер.Например, определение "ширина = 320, начальный масштаб = 1" может использоваться для точного размещения на небольшом дисплее телефона в портретном режиме. Это может вызвать проблемы, если браузер не отображает страницу большего размера. Чтобы исправить это, браузеры при необходимости увеличивают ширину области просмотра, чтобы заполнить экран в требуемом масштабе. Это особенно полезно на устройствах с большим экраном, таких как iPad. (В книге Аллена Пайка «Выбор области просмотра для сайтов iPad» есть хорошее объяснение для веб-разработчиков.)

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

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

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

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

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

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

Адаптивный дизайн с контролем окна просмотра

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

Когда мы хотим изменить макет сайта в зависимости от размера экрана, мы обычно пишем что-то вроде этого:

  @media screen и (min-width: 960px) {
  тело {цвет фона: зеленый; }
}

@media screen и (max-width: 960px) и (min-width: 500px) {
  тело {цвет фона: розовый; }
}

@media screen и (max-width: 500 пикселей) {
  тело {цвет фона: желтый; }
}
  

При тестировании отзывчивости сайта изменением размера браузера все вроде работает нормально.

Проблема

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

(iPhone 6, без управления окном просмотра)

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

• Пиксель устройства — количество пикселей на физическом дисплее.Например, iPhone 6 имеет размер 375×667 пикселей.
  (Примечание: существует два типа пикселей устройства — аппаратные пиксели и пиксели, не зависящие от устройства — но это различие неуместно).

• CSS-пиксель — это абстрактная единица, которую мы используем в объявлениях CSS. Сам по себе 1 пиксель CSS не имеет объективного размера. Вместо этого способ отображения 1 пикселя CSS на веб-странице определяется областью просмотра.

• Viewport — определяет плотность пикселей страницы.Ширина области просмотра, например, 750 пикселей, будет означать, что 750 пикселей CSS будут охватывать всю ширину экрана (с масштабом 1: 1).

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

По умолчанию большинство браузеров устанавливают размер области просмотра от 800 до 1024 пикселей. Это объясняет, почему в нашем примере вид рабочего стола отображается, несмотря на фактическую ширину устройства.

Одной из метаданных, которые мы можем передать с метатегом, является область просмотра .Это позволяет нам контролировать определенные аспекты области просмотра и устранять несоответствия. Тег имеет следующую структуру —

Есть 6 «ключей», которые мы можем передать для содержания —

• ширина
• высота
• начальная шкала
• минимальный масштаб
• максимальный масштаб
• масштабируется пользователем

Ширина

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

Добавив это, мы теперь получаем точный вид.

(iPhone 6, ширина = ширина устройства)

Начальная шкала

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

Например, у нас есть элемент шириной : 100 пикселей; в области просмотра шириной 400 пикселей. На данный момент элемент занимает 1/4 экрана. Если пользователь увеличивает масштаб до 2, ширина области просмотра теперь становится 200 пикселей, но элемент остается шириной 100 пикселей CSS. На данный момент элемент занимает половину экрана.

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

Этот параметр обычно необходим для решения проблемы, вызванной установкой width = device-width >. Некоторые мобильные браузеры по умолчанию будут использовать ширину устройства в портретном режиме, поэтому при повороте устройства в альбомную ориентацию будет отображаться неточный вид.

(iPhone 6 в альбомной ориентации, без начального масштаба)

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

(iPhone 6 в альбомной ориентации, с начальным масштабом)

Масштабируемый пользователем, максимальный и минимальный масштаб

Эти параметры управляют возможностью пользователя масштабировать страницу пальцем пальцем.

• Максимальный масштаб — Максимальный масштаб, который пользователь может увеличить на странице. Если, например, установлено значение 1, пользователь вообще не сможет увеличивать масштаб.Если установлено значение 2, пользователь сможет увеличивать масштаб только в соотношении 1 пиксель CSS к 2 пикселям области просмотра.

• Минимальный масштаб — Минимальный масштаб, в котором пользователь может увеличить страницу. Например, если установлено значение 2, пользователь по умолчанию будет увеличен в масштабе 1: 2 и не сможет уменьшить масштаб до 1: 1.

• Масштабируемый пользователем — Если установлено значение Масштабируемое пользователем = нет , пользователь не сможет увеличивать или уменьшать масштаб вообще.

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

Каждый раз, когда вы предотвращаете масштабирование веб-сайта, умирает котенок http://t.co/eokrHZ6ieL

— Брент Джексон (@jxnblk) 25 марта 2015 г.

Управление окном просмотра с помощью css

Несмотря на очень широкую поддержку, метатег области просмотра не является формальной частью HTML5. Вместо этого W3C работает над внедрением его в CSS с правилом @viewport . Правило @viewport работает аналогично метатегу и допускает те же объявления.

  @viewport {
  масштабирование: 1.0; / * то же, что и initial-scale = 1 * /
  ширина: ширина устройства;
}

/ * Префиксы, зависящие от производителя * /
@ -ms-viewport
@ -webkit-viewport
@ -moz-viewport
@ -o-viewport
  

Пока не будет формализовано правило @viewport , вы должны придерживаться метатега или использовать оба.

TL; DR

Чтобы ваши медиа-запросы работали на портативных устройствах, поместите это в свой !

Вы можете протестировать примеры самостоятельно в моем репозитории на github.

HTML | Мета-тег области просмотра для адаптивного веб-дизайна

< html >

< head >

< заголовок > GeeksforGeeks title >

< meta charset = "utf-8" name = "viewport"

content = "width = device-width, initial-scale = 1.0 " >

< style >

.gfg {

font-size: 40px;

font-weight: жирный ;

цвет: зеленый;

выравнивание текста: по центру;

}

.компьютерные фанаты {

font-size: 17px;

выравнивание текста: по центру;

}

p {

выравнивание текста: выравнивание по ширине;

}

стиль >

головка >

< корпус 3 > 9000

< div class = "gfg" > GeeksforGeeks div >

< div class = " geeks " > Портал информатики для вундеркиндов div >

< p > Подготовьтесь к набору персонала таких компаний, как

Microsoft, Amazon, Adobe и т. Д. Wi й бесплатный онлайн-курс подготовки к размещению

курс.Курс фокусируется на различных вопросах MCQ и кодировании, которые, вероятно, будут задаваться в ходе собеседований

и сделать ваш предстоящий сезон трудоустройства

эффективным и успешным. p >

< p > Обширная серия онлайн-тестов для GATE 2019 для повышения подготовки

к претендентам GATE 2019.Серия испытаний

разработана с учетом образца бумаги GATE предыдущих лет и гарантирует соответствие

стандарту GATE. Эта серия тестов поможет кандидатам

отслеживать и улучшать подготовку с помощью вопросов

различных уровней сложности. Будет две серии тестов

, охватывающих весь учебный план GATE, включая математику и

Aptitude.Тестовая серия I будет охватывать базовую и среднюю сложность,

, тогда как в тестовой серии II сложность будет немного выше. p >

body >

html >

Включение адаптивных макетов с помощью метатега Viewport

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

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

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

В этом руководстве, основанном на бесплатном видео «Добавление метатега окна просмотра к html.tpl.php», предполагается, что у вас есть базовое или промежуточное понимание:

• Работа с файлами сайта Drupal и их редактирование (т. Е. Копирование файлов, навигация по файлам вашего сайта, редактирование и сохранение файла)
• Основы работы с файлами шаблонов в теме Drupal
• Как найти элемент заголовка в документе HTML

Руки на

1. Проверьте, есть ли у вашей темы html.tpl.php файл шаблона. В своей файловой системе перейдите к sites / all / YOUR_THEME и проверьте, существует ли уже файл html.tpl.php .
2. (пропустите этот шаг, если в вашей теме уже есть файл html.tpl.php.) В файловой системе перейдите в корень вашего сайта Drupal. Скопируйте modules / system / html.tpl.php и вставьте в корневой каталог своей темы. Например, моя тема называется «responseiverobots», поэтому я скопировал modules / system / html.tpl.php на сайты / all / themes / responseiverobots / html.tpl.php . (Если в вашей теме есть подкаталог "шаблоны", то поместите его в этот каталог.)
3. Откройте файл sites / all / themes / YOUR_THEME / html.tpl.php в любом текстовом редакторе.
4. Скопируйте и вставьте эту строку в файл темы html.tpl.php внутри тега :

5. Очистить кеш Drupal. (В меню «Администрация» выберите «Конфигурация»> «Производительность»> (admin / config / development / performance) и нажмите кнопку «Очистить все кеши» или запустите drush cc all в интерфейсе командной строки, если у вас установлен drush. ).
6. Протестируйте свой сайт в мобильном эмуляторе Chrome или на смартфоне. Откройте свой сайт в Chrome, щелкните правой кнопкой мыши и выберите «Проверить элемент». Щелкните значок мобильного телефона в левом верхнем углу инспектора.


Включение адаптивных макетов с шириной устройства

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

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

В этом руководстве вы узнали, как включить адаптивные макеты в своей теме, добавив метатег области просмотра в файл шаблона html. Для получения дополнительной информации и демонстрации посмотрите бесплатное видео «Добавление метатега области просмотра к html.tpl.php» в серии «Начало работы с адаптивным веб-дизайном в Drupal», теперь на Drupalize.Me.

Окно просмотра - это окно на ваш сайт - Digital.gov

Время чтения: 4 минуты

Восемь принципов поддержки мобильных устройств

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

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

Чтобы решить эту проблему, браузеры на этих небольших устройствах будут уменьшать всю веб-страницу до размеров экрана.Однако это создало другую проблему: полноразмерная веб-страница, которая отлично смотрелась на рабочем столе, но теперь была всего в несколько дюймов в высоту и в большинстве случаев слишком мала для использования. Чтобы не бояться, на помощь пришел адаптивный веб-дизайн (RWD)! RWD - это использование HTML и CSS для автоматического изменения размера, скрытия, сжатия или увеличения веб-сайта, чтобы он хорошо выглядел на всех дисплеях устройства. Но все еще может пойти не так.

Ниже приведены два решения предотвратимых проблем, вызванных неправильной реализацией области просмотра на сайте.

1. Настроить окно просмотра
2. Размер содержимого окна просмотра

Ниже приведены простые исправления для проблем с удобством использования области просмотра.

Настроить окно просмотра

Проблема: без определения области просмотра размер страницы не уменьшится до размера экрана.

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

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

Решение: Установите область просмотра!

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

Атрибут width = device-width в элементе content сообщает браузеру, что ширина страницы должна соответствовать ширине любого экрана, на котором она отображается.

Атрибут initial-scale = 1 в элементе content сообщает браузеру, что если страница отображается в альбомной ориентации (телефон или планшет повернут на бок), сделайте страницу настолько широкой, насколько это возможно на этом экране.

Список литературы

Размер содержимого в области просмотра

Проблема: Контент, размер которого явно задан в пикселях (пикс.), Не всегда правильно отображается на маленьких экранах

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

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

Решение: установите максимальную ширину содержимого не более 100 процентов!

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

Например, рекомендуется использовать:

Регулирует размер в процентах от размера экрана.

Это отлично работает для вашего текста и графики, но, если вы используете сторонние виджеты, фреймы или видео от других, ОСТОРОЖНО. Возможно, вам придется придумать другой способ изменения размера объекта для правильного отображения в разных окнах просмотра.

Список литературы

Руководство по адаптивному веб-дизайну для новичков в 2021 году (примеры кода)

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

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

Таким образом, если вы поместите ваш контент в один столбец и вызовете его выход, это не приведет к его сокращению.

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

И это улучшение пользовательского опыта означает более высокие конверсии и рост бизнеса.

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

Что такое адаптивный веб-дизайн?

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

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

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

Адаптивный дизайн позволяет доставлять несколько отдельных макетов вашего контента и дизайна на разные устройства в зависимости от размера экрана.