Как создавать сайты, отвечающие потребностям и возможностям устройства, на котором они просматриваются.
Использование мобильных устройств для серфинга в Интернете продолжает расти астрономическими темпами, и эти устройства часто ограничены размером дисплея и требуют другого подхода к расположению контента на экране.
Адаптивный веб-дизайн, первоначально определенный Итаном Маркоттом в книге «A List Apart» , отвечает потребностям пользователей и устройств, которые они используют. Компоновка меняется в зависимости от размера и возможностей устройства. Например, на телефоне пользователи будут видеть контент, отображаемый в виде одного столбца; планшет может отображать один и тот же контент в двух столбцах.
На телефонах, «фаблетах», планшетах, настольных компьютерах, игровых консолях, телевизорах и даже носимых устройствах существует множество экранов различных размеров. Размеры экранов постоянно меняются, поэтому важно, чтобы ваш сайт мог адаптироваться к любому размеру экрана сегодня или в будущем. Кроме того, устройства имеют разные функции, с помощью которых мы с ними взаимодействуем. Например, некоторые из ваших посетителей будут использовать сенсорный экран. Современный адаптивный дизайн учитывает все эти факторы, чтобы оптимизировать работу для всех.
Установите область просмотра
Страницы, оптимизированные для различных устройств, должны включать метатег области просмотра в заголовке документа. Мета-тег области просмотра дает браузеру инструкции о том, как управлять размерами и масштабированием страницы.
Чтобы обеспечить наилучшее взаимодействие, мобильные браузеры отображают страницу на ширине экрана настольного компьютера (обычно около 980px , хотя это зависит от устройства), а затем пытаются улучшить внешний вид контента, увеличивая размеры шрифта и масштабируя контент в соответствии с размером. экран. Это означает, что размеры шрифтов могут показаться пользователям несовместимыми, и им, возможно, придется дважды нажать или свести пальцы, чтобы увидеть контент и взаимодействовать с ним.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Использование мета-значения области просмотра width=device-width указывает странице соответствовать ширине экрана в пикселях, независимых от устройства. Независимый от устройства (или плотности) пиксель представляет собой представление одного пикселя, который на экране высокой плотности может состоять из множества физических пикселей. Это позволяет странице перекомпоновать содержимое в соответствии с различными размерами экрана, независимо от того, отображается ли оно на маленьком мобильном телефоне или на большом мониторе настольного компьютера.
Некоторые браузеры сохраняют постоянную ширину страницы при повороте в альбомный режим и масштабируют ее, а не перекомпоновывают, чтобы заполнить экран. Добавление значения initial-scale=1 указывает браузерам устанавливать соотношение 1:1 между пикселями CSS и пикселями, независимыми от устройства, независимо от ориентации устройства, и позволяет странице использовать всю альбомную ширину.
Аудит Lighthouse не имеет тега <meta name="viewport"> с width или initial-scale может помочь вам автоматизировать процесс проверки правильности использования метатега области просмотра в ваших HTML-документах.
Обеспечьте доступное окно просмотра
Помимо установки initial-scale , вы также можете установить следующие атрибуты в окне просмотра:
-
minimum-scale -
maximum-scale -
user-scalable
Если они установлены, они могут отключить возможность пользователя масштабировать область просмотра, что потенциально может вызвать проблемы с доступностью. Поэтому мы бы не рекомендовали использовать эти атрибуты.
Размер содержимого в области просмотра
Как на настольных, так и на мобильных устройствах пользователи привыкли прокручивать веб-сайты вертикально, а не горизонтально; принуждение пользователя к горизонтальной прокрутке или уменьшению масштаба, чтобы увидеть всю страницу, приводит к ухудшению пользовательского опыта.
При разработке мобильного сайта с мета-тегом области просмотра легко случайно создать содержимое страницы, которое не совсем помещается в указанную область просмотра. Например, изображение, отображаемое с шириной, превышающей ширину области просмотра, может привести к горизонтальной прокрутке области просмотра. Вам следует настроить этот контент так, чтобы он соответствовал ширине области просмотра, чтобы пользователю не приходилось прокручивать по горизонтали.
Контент имеет неправильный размер для области просмотра. Аудит Lighthouse может помочь вам автоматизировать процесс обнаружения переполненного контента.
Изображений
Изображение имеет фиксированные размеры, и если оно больше области просмотра, появится полоса прокрутки. Распространенный способ решения этой проблемы — задать всем изображениям max-width 100% . Это приведет к тому, что изображение сожмется, чтобы соответствовать имеющемуся у него пространству, если размер области просмотра меньше изображения. Однако поскольку max-width , а не width равна 100% , изображение не будет растягиваться больше своего естественного размера. Как правило, безопасно добавлять в таблицу стилей следующее, чтобы у вас никогда не возникало проблем с изображениями, вызывающими полосу прокрутки.
img {
max-width: 100%;
display: block;
}
Добавьте размеры изображения в элемент img.
При использовании max-width: 100% вы переопределяете естественные размеры изображения, однако вам все равно следует использовать атрибуты width и height в теге <img> . Это связано с тем, что современные браузеры будут использовать эту информацию, чтобы зарезервировать место для изображения перед его загрузкой. Это поможет избежать изменений макета при загрузке контента.
Макет
Поскольку размеры экрана и ширина в пикселях CSS сильно различаются между устройствами (например, между телефонами и планшетами и даже между разными телефонами), для хорошей визуализации контента не следует полагаться на определенную ширину области просмотра.
Раньше для этого требовались элементы настройки, используемые для создания макета в процентах. В примере ниже вы можете увидеть макет из двух столбцов с плавающими элементами, размер которых определяется в пикселях. Как только область просмотра станет меньше общей ширины столбцов, нам придется прокручивать по горизонтали, чтобы увидеть содержимое.
Используя процентные значения ширины, столбцы всегда остаются в определенном проценте от контейнера. Это означает, что столбцы становятся уже, а не создают полосу прокрутки.
Современные методы макетирования CSS, такие как Flexbox, Grid Layout и Multicol, значительно упрощают создание этих гибких сеток.
Флексбокс
Этот метод компоновки идеален, когда у вас есть набор предметов разного размера и вы хотите, чтобы они удобно размещались в ряду или рядах, при этом более мелкие предметы занимали меньше места, а более крупные - больше.
.items {
display: flex;
justify-content: space-between;
}
В адаптивном дизайне вы можете использовать Flexbox для отображения элементов в одну строку или в несколько строк по мере уменьшения доступного пространства.
CSS-сетка
CSS Grid Layout позволяет легко создавать гибкие сетки. Если мы рассмотрим предыдущий пример с плавающим размещением, то вместо того, чтобы создавать столбцы с процентами, мы могли бы использовать макет сетки и единицу fr , которая представляет часть доступного пространства в контейнере.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Сетку также можно использовать для создания обычных макетов сетки, вмещающих столько элементов, сколько поместится. Количество доступных треков будет уменьшаться по мере уменьшения размера экрана. В приведенной ниже демонстрации у нас есть столько карточек, сколько поместится в каждой строке, с минимальным размером 200px .
Узнайте больше о CSS Grid Layout.
Многоколоночный макет
Для некоторых типов макета вы можете использовать макет с несколькими столбцами (Multicol), который позволяет создавать гибкое количество столбцов с помощью свойства column-width . В приведенной ниже демонстрации вы можете видеть, что столбцы добавляются, если есть место для еще одного столбца 200px .
Используйте медиа-запросы CSS для большей отзывчивости.
Иногда вам нужно будет внести более значительные изменения в макет для поддержки определенного размера экрана, чем позволяют методы, показанные выше. Вот тут-то и пригодятся медиа-запросы.
Медиа-запросы — это простые фильтры, которые можно применять к стилям CSS. Они позволяют легко изменять стили в зависимости от типов устройств, отображающих контент, или характеристик этого устройства, например ширины, высоты, ориентации, возможности наведения, а также того, используется ли устройство в качестве сенсорного экрана.
Чтобы предоставить различные стили для печати, вам необходимо указать тип вывода, чтобы можно было включить таблицу стилей со стилями печати следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
Альтернативно вы можете включить стили печати в основную таблицу стилей с помощью медиа-запроса:
@media print {
/* print styles go here */
}
Для адаптивного веб-дизайна мы обычно запрашиваем функции устройства, чтобы предоставить другой макет для небольших экранов, или когда мы обнаруживаем, что наш посетитель использует сенсорный экран.
Медиа-запросы на основе размера области просмотра
Медиа-запросы позволяют нам создавать адаптивный интерфейс, в котором определенные стили применяются к маленьким экранам, большим экранам и где-либо между ними. Таким образом, особенностью, которую мы здесь обнаруживаем, является размер экрана, и мы можем проверить следующие вещи.
-
width(min-width,max-width) -
height(min-height,max-height) -
orientation -
aspect-ratio
Все эти функции отлично поддерживаются браузерами. Более подробную информацию, включая информацию о поддержке браузеров, см. в разделе «Width », «Height », «Orientation » и «Соотношение сторон» на MDN.
Медиа-запросы на основе возможностей устройства
Учитывая разнообразие доступных устройств, мы не можем предположить, что каждое большое устройство представляет собой обычный настольный компьютер или ноутбук или что люди используют сенсорный экран только на небольшом устройстве. Благодаря некоторым новым дополнениям к спецификации медиа-запросов мы можем проверять такие функции, как тип указателя, используемого для взаимодействия с устройством, и может ли пользователь наводить указатель мыши на элементы.
-
hover -
pointer -
any-hover -
any-pointer
Попробуйте просмотреть эту демонстрацию на разных устройствах, например на обычном настольном компьютере и на телефоне или планшете.
Эти новые функции хорошо поддерживаются во всех современных браузерах. Узнайте больше на страницах MDN о hover , Any-hover , pointer , Any-pointer .
Использование any-hover и any-pointer
Функции any-hover и any-pointer проверяют, есть ли у пользователя возможность наводить курсор или использовать указатель этого типа, даже если это не основной способ взаимодействия со своим устройством. Будьте очень осторожны при их использовании. Заставлять пользователя переключаться на мышь, когда он использует сенсорный экран, не очень дружелюбно! Однако any-hover и any-pointer могут быть полезны, если важно определить, какое устройство у пользователя. Например, ноутбук с сенсорным экраном и трекпадом должен иметь грубый и точный указатели, а также возможность наведения курсора.
Как выбрать точки останова
Не определяйте точки останова на основе классов устройств. Определение точек останова на основе конкретных устройств, продуктов, торговых марок или операционных систем, которые используются сегодня, может привести к кошмару при обслуживании. Вместо этого сам контент должен определять, как макет адаптируется к контейнеру.
Выбирайте основные точки останова, начиная с малого, а затем постепенно увеличивая их.
Сначала спроектируйте контент так, чтобы он поместился на экране небольшого размера, а затем расширяйте экран до тех пор, пока не станет необходимой точка останова. Это позволяет оптимизировать точки останова в зависимости от содержимого и поддерживать минимально возможное количество точек останова.
Давайте рассмотрим пример, который мы видели вначале: прогноз погоды. Первый шаг — сделать так, чтобы прогноз хорошо выглядел на маленьком экране.
Затем измените размер браузера до тех пор, пока между элементами не останется слишком много пустого пространства, и прогноз просто не будет выглядеть так хорошо. Решение несколько субъективное, но выше 600px конечно слишком широко.
Чтобы вставить точку останова на 600px , создайте два медиа-запроса в конце CSS для компонента: один для использования, когда размер браузера составляет 600px и ниже, а другой — когда его ширина превышает 600px .
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Наконец, проведите рефакторинг CSS. Внутри медиа-запроса для max-width 600px добавьте CSS, предназначенный только для маленьких экранов. Внутри медиа-запроса для min-width 601px добавьте CSS для больших экранов.
При необходимости выбирайте незначительные точки останова.
Помимо выбора основных точек останова при значительных изменениях макета, также полезно внести поправки на незначительные изменения. Например, между основными точками останова может быть полезно отрегулировать поля или отступы элемента или увеличить размер шрифта, чтобы он выглядел более естественным в макете.
Начнем с оптимизации макета маленького экрана. В этом случае давайте увеличим шрифт, когда ширина области просмотра превышает 360px . Во-вторых, когда места достаточно, мы можем разделить высокие и низкие температуры так, чтобы они находились на одной линии, а не друг над другом. А еще давайте сделаем значки погоды немного крупнее.
@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;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
Аналогично, для больших экранов лучше ограничить максимальную ширину панели прогноза, чтобы она не занимала всю ширину экрана.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Оптимизируйте текст для чтения
Классическая теория читабельности предполагает, что идеальная колонка должна содержать от 70 до 80 символов в строке (около 8-10 слов на английском языке). Таким образом, каждый раз, когда ширина текстового блока превышает 10 слов, рассмотрите возможность добавления точки останова.
Давайте более подробно рассмотрим приведенный выше пример публикации в блоге. На экранах меньшего размера шрифт Roboto размером 1em отлично работает, обеспечивая 10 слов в строке, но на экранах большего размера требуется точка останова. В этом случае, если ширина браузера превышает 575px , идеальная ширина контента — 550px .
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
Избегайте простого сокрытия контента
Будьте осторожны при выборе контента, который следует скрыть или показать, в зависимости от размера экрана. Не скрывайте контент просто потому, что вы не можете уместить его на экране. Размер экрана не является окончательным показателем того, чего может хотеть пользователь. Например, исключение количества пыльцы из прогноза погоды может стать серьезной проблемой для весенних аллергиков, которым нужна информация, чтобы определить, могут ли они выходить на улицу или нет.
Просмотр точек останова медиазапросов в Chrome DevTools
После того как вы настроили точки останова медиа-запросов, вы захотите посмотреть, как ваш сайт будет выглядеть с ними. Вы можете изменить размер окна браузера, чтобы активировать точки останова, но Chrome DevTools имеет встроенную функцию, которая позволяет легко увидеть, как страница выглядит под разными точками останова.
Чтобы просмотреть страницу с разными точками останова:
Откройте DevTools и включите режим устройства . По умолчанию он открывается в адаптивном режиме .
Чтобы просмотреть медиа-запросы, откройте меню «Режим устройства» и выберите «Показать медиа-запросы» , чтобы отобразить точки останова в виде цветных полос над страницей.
Нажмите на одну из полосок, чтобы просмотреть свою страницу, пока активен медиа-запрос. Щелкните правой кнопкой мыши панель, чтобы перейти к определению медиа-запроса.