Как сделать адаптивный сайт на html css для разных разрешений экрана

Обновлено: 06.07.2024

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

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

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

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

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

Это глупый подход.

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

Компания Mashable назвала 2013 год годом адаптивного веб-дизайна. Почему? Более 30% их трафика приходится на мобильные устройства. Они прогнозируют, что к концу года это число может достичь 50%. В целом в Интернете 17,4 % веб-трафика приходилось на смартфоны в 2013 году. В то же время на использование Internet Explorer, например, приходится лишь 12 % всего браузерного трафика, т. е. примерно на 4 %. с этого времени в прошлом году (по данным W3Schools). Если вы оптимизируете для конкретного браузера, а не для глобальной популяции смартфонов, вы упускаете из виду лес за деревьями. А в некоторых случаях это может означать разницу между успехом и неудачей — адаптивный дизайн влияет на показатели конверсии, поисковую оптимизацию, показатель отказов и многое другое.

Подход адаптивного веб-дизайна

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

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

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

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

Типы мультимедиа впервые появились в HTML4 и CSS2.1, что позволило размещать отдельные CSS для экрана и печати. Таким образом, можно было установить отдельные стили для отображения страницы на компьютере по сравнению с ее распечаткой.

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

Это определение возможно путем настройки основных свойств: max-width , device-width , ориентация и цвет . Возможны и другие определения; но в этом случае самое важное, на что следует обратить внимание, — это минимальное разрешение (ширина) и настройки ориентации (пейзаж или портрет).

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

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

«Умный зум»

В мобильных браузерах используется так называемое "умное масштабирование", чтобы предоставить пользователям "превосходный" опыт чтения.По сути, интеллектуальное масштабирование используется для пропорционального уменьшения размера страницы. Это может проявляться двумя способами: (1) масштабирование по инициативе пользователя (например, двойное касание экрана iPhone для увеличения текущего веб-сайта) и (2) первоначальное отображение увеличенной версии веб-страницы на загрузить.

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

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

Кроме того, мы можем полностью отключить масштабирование с помощью user-scalable=false .

Ширина страницы

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

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

Однако существует несколько различных определений ширины. Например, 320 и выше имеют пять приращений CSS3 Media Query по умолчанию: 480, 600, 768, 992 и 1382 пикселей. Наряду с данным примером в этом руководстве по адаптивной веб-разработке я мог бы перечислить как минимум десять других подходов.

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

Псевдоэлементы

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

Начнем с того, что скрытие некоторых элементов ( display: none; ) может быть отличным решением, когда речь идет об уменьшении количества элементов на экране для макета смартфона, где почти всегда не хватает места.

Но помимо этого вы также можете проявить творческий подход с помощью псевдоэлементов CSS (селекторов), например, :before и :after . Примечание. Опять же, псевдоэлементы поддерживаются всеми основными браузерами.

Псевдоэлементы используются для применения определенных стилей к определенным частям элемента HTML или для выбора определенного подмножества элементов. Например, псевдоэлемент :first-line позволяет вам определять стили исключительно для первой строки определенного селектора (например, p:first-line будет применяться к первой строке всех p ). Точно так же псевдоэлемент a:visited позволит вам определить стили для всех элементов со ссылками, ранее посещенными пользователем. Очевидно, что они могут пригодиться.

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

Используя только псевдоэлементы :before и :after, мы достигаем следующего:

Дополнительную информацию о магии псевдоэлементов можно найти в хорошей статье Криса Койера CSS-Tricks.

Итак, с чего мне начать?

В этом руководстве мы определили некоторые строительные блоки адаптивного веб-дизайна (например, медиа-запросы и псевдоэлементы) и представили несколько примеров каждого из них. Куда мы идем дальше?

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

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

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

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

Для смартфона как никогда важно группировать конкретное содержимое и иерархически определять важность отдельных частей.

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

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

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

Другие элементы адаптивного дизайна

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

С другими элементами следует обращаться аналогичным образом. Например, отличным решением для значков в RWD является использование IconFonts.

Несколько слов о системах Fluid Grid

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

Хотя эти системы с плавающей сеткой тесно связаны с тем, что мы здесь обсуждали, на самом деле они представляют собой совершенно отдельный объект, для подробного обсуждения которого потребуется дополнительное руководство. Поэтому я упомяну лишь некоторые основные фреймворки, поддерживающие такое поведение: Bootstrap, Unsemantic и Brackets.

Заключение

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

Адаптивный веб-дизайн — это создание веб-страниц, которые будут хорошо выглядеть на всех устройствах!

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

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

Адаптивный веб-дизайн — это использование HTML и CSS для автоматического изменения размера, скрытия, уменьшения или увеличения веб-сайта, чтобы он хорошо выглядел на всех устройствах (настольных компьютерах, планшетах и телефонах):

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

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

Пример

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

Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра:

Без метатега окна просмотра:

С метатегом окна просмотра:

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

Адаптивные изображения

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

Использование свойства ширины

Если свойство ширины CSS установлено на 100 %, изображение будет адаптивным и масштабироваться вверх и вниз:

Пример

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

Использование свойства max-width

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

Пример

Показывать разные изображения в зависимости от ширины браузера

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

Измените размер окна браузера, чтобы увидеть, как изображение ниже меняется в зависимости от ширины:

Пример

Размер адаптивного текста

Размер текста можно задать с помощью единицы измерения "vw", что означает "ширину области просмотра".

Таким образом, размер текста будет соответствовать размеру окна браузера:

Измените размер окна браузера, чтобы увидеть, как масштабируется размер текста.

Пример

Просмотр — это размер окна браузера. 1vw = 1% ширины области просмотра. Если окно просмотра имеет ширину 50 см, 1vw равно 0,5 см.

Медиа-запросы

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

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

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

Пример

Совет. Чтобы узнать больше о медиазапросах и адаптивном веб-дизайне, ознакомьтесь с нашим руководством по RWD.

Адаптивная веб-страница — полный пример

Адаптивная веб-страница должна хорошо выглядеть на больших экранах компьютеров и на небольших мобильных телефонах.

Вы когда-нибудь слышали о W3Schools Spaces? Здесь вы можете создать свой веб-сайт с нуля или использовать шаблон и разместить его бесплатно.

* кредитная карта не требуется

Адаптивный веб-дизайн — фреймворки

Все популярные фреймворки CSS предлагают адаптивный дизайн.

Они бесплатны и просты в использовании.

W3.CSS

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

W3.CSS меньше и быстрее, чем аналогичные фреймворки CSS.

W3.CSS разработан как высококачественная альтернатива Bootstrap.

W3.CSS не зависит от jQuery или любой другой библиотеки JavaScript.

Измените размер страницы, чтобы увидеть скорость отклика!

Лондон

Лондон — столица Англии.

Это самый густонаселенный город Соединенного Королевства с населением более 13 миллионов человек.

Париж

Париж — столица Франции.

Район Парижа – один из крупнейших населенных пунктов Европы с населением более 12 миллионов человек.

Токио

Токио — столица Японии.

Это центр Большого Токио и самый густонаселенный мегаполис в мире.

Адам Хенсон

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

Не так давно термина "адаптивный веб-дизайн" не существовало. Но сегодня большинству из нас пришлось в той или иной степени принять его.

Согласно Statistica, по состоянию на 2019 год 61 % всех посещений в поиске Google приходится на мобильные устройства. В сентябре 2020 г. Google изменит свой алгоритм поиска, чтобы отдавать приоритет веб-сайтам, оптимизированным для мобильных устройств.

В этом посте я расскажу о следующем:

Что такое адаптивный веб-дизайн?
Метатег области просмотра и его функции
Эффективные приемы, используемые в адаптивном веб-дизайне для мобильных устройств и планшетов.
Инструменты для моделирования и мониторинга взаимодействия с пользователями мобильных устройств и планшетов.

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

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

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

подключение к сети
размер экрана
тип взаимодействия (сенсорные экраны, трекпады)
графическое разрешение.

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

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

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

Метатег области просмотра для идентификации мобильного веб-сайта

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

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

Ниже приведена стандартная реализация:

Пример метатега области просмотра

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

Запросы мультимедиа CSS для разных размеров экрана и ориентации

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

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

Ниже приведен пример распространенного варианта использования стиля mobile first, в котором ширина столбца составляет 100 % для небольших устройств, а в больших областях просмотра — 50 %.

Пример CSS для мобильных устройств

Приведенный выше код является простым примером, но то, что он на самом деле делает, довольно интересно.

С учетом приоритета мобильных устройств для элемента "column" устанавливается ширина 100%;
С помощью медиа-запроса min-width мы определяем правила специально для областей просмотра с минимальной шириной 600 пикселей (шириной более 600 пикселей). Таким образом, для областей просмотра шире 600 пикселей ширина нашего элемента столбца будет составлять 50 % от его родительского элемента.

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

Что такое Flexbox?

Вам может быть интересно, "что делает Flexbox"? Лучший вопрос - "что не может сделать Flexbox"? Какой самый простой способ вертикального центрирования с помощью CSS? Флексбокс. Как создать адаптивную сетку? Флексбокс. Как мы можем достичь глобального мира? Флексбокс.

Модуль Flexbox Layout (Flexible Box) обеспечивает более эффективный способ компоновки, выравнивания и распределения пространства между элементами в контейнере, даже если их размер является динамическим (отсюда и слово «гибкий»).

В приведенном ниже примере мы объединяем медиа-запросы, как описано выше, для создания адаптивной сетки.

Пример CSS flexbox

С помощью этого кода мы делаем следующее:

Создайте макет flexbox с display: flex в нашем основном элементе-контейнере.
Стиль для мобильных устройств. Мы устанавливаем для основного элемента значение flex-wrap: wrap, что позволяет дочерним элементам обтекать наш макет flexbox, как показано ниже на рисунке 1. Мы устанавливаем flex-basis: 100% для наших элементов div, чтобы гарантировать, что они охватывают 100% ширины родительского элемента. в макете flexbox (рис. 1).
Стиль для больших устройств, таких как планшеты и настольные компьютеры. Мы используем медиа-запрос, аналогичный нашему примеру в предыдущем разделе, чтобы установить для основного элемента контейнера значение flex-wrap: nowrap. Это гарантирует, что дочерние элементы не переносятся и поддерживают столбец в макете типа строки. Установив для div значение flex-basis: 33% в медиа-запросе, мы устанавливаем столбцы, ширина которых составляет 33% от ширины родителя.
В этом примере волшебство будет проявляться на больших устройствах с нашими комбинированными правилами медиа-запроса и flexbox. Поскольку мы определили display: flex и не переопределили правило в медиа-запросе, у нас есть макет flexbox для мобильных устройств, планшетов и компьютеров. Медиа-запрос flex-basis: 33% и унаследованные правила display: flex дадут нам узнаваемый макет flexbox, как показано на рис. писать клубки CSS.

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

Горизонтальная прокрутка с переполнением

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

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

Адаптивный веб-дизайн RWD Адаптивное меню Пример прокрутки с переполнением Это много контента! Да, у нас есть еще один элемент Пример меню с горизонтальной прокруткой

Как ты это сделал!? Давайте углубимся.

overflow-y: ключевой компонент этого рецепта — прокрутка. Указав его, дочерние элементы будут перекрывать горизонтальную ось с поведением прокрутки.
Не так быстро! Хотя вы можете подумать, что overflow-y будет достаточно, мы также должны указать браузеру не оборачивать дочерние элементы пробелами: nowrap ?

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

Адаптивные изображения

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

Это делает много вещей. Давайте разберем это:

Если установить max-width: 100 %, изображение будет увеличиваться или уменьшаться в зависимости от ширины контейнера.
Используя комбинацию тегов picture , source и img, мы фактически отображаем только одно изображение и загружаем только наиболее подходящее изображение в зависимости от устройства пользователя.
WebP – это современный формат изображений, обеспечивающий превосходное сжатие изображений в Интернете. Используя источник, мы можем ссылаться на изображение WebP для использования в браузерах, которые его поддерживают, и другой тег источника, чтобы ссылаться на PNG-версию изображений, которые не поддерживают WebP.
srcset используется, чтобы сообщить браузеру, какое изображение использовать в зависимости от разрешения устройства.
Мы устанавливаем встроенную отложенную загрузку, используя пару атрибута loading="lazy" и значения.

Адаптивное видео

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

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

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

В этом примере у нас есть видео YouTube, встроенное в виде iframe, и контейнер div с классом videoWrapper. Этот код делает многое. давайте разбираться.

position: relative на элементе-контейнере позволяет дочерним элементам использовать абсолютное позиционирование относительно него.
height: 0 в сочетании с padding-bottom: 56,25 % — это ключевой элемент, определяющий динамическое поведение и обеспечивающий соотношение сторон 16:9.
position: absolute , top: 0 и left: 0, заданные для iframe, создают поведение, при котором элемент позиционирует себя абсолютно относительно своего родителя. прикрепив его к левому верхнему углу.
И, наконец, ширина и высота, равные 100 %, делают дочерний элемент iframe на 100 % родителем. Родительский файл .videoWrapper берет на себя полный контроль над созданием этого макета соотношения сторон.

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

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

Инструменты для имитации и мониторинга адаптивных веб-сайтов

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

Эмуляция мобильных устройств Chrome DevTools

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

Отслеживание производительности мобильных веб-сайтов с помощью Foo

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

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

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

Рисунок 4. Отчет Lighthouse с эмуляцией мобильного устройства

Заключение

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

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

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

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

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

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

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

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

Внимание

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

Чтобы автоматизировать анализ правильности использования метатега окна просмотра в HTML-документах, с начальной проверкой Lighthouse, который анализирует, использовать ли в теге <meta name="viewport"> значения ширины или начального масштаба .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для некоторых типов образцов можно увидеть образцы с множеством столбцов (Multicol), которые могут создавать произвольное количество столбцов с использованием свойств ширины столбца. /p>

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

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

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

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

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

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

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

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

наведите
указатель
любое наведение
любой указатель

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

Эти новые функции хорошо обнаруживаются во всех современных браузерах. Подробнее о медиа-функциях hover, any-hover, pointer и any-pointer читайте на странице MDN.

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

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

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

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

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

Третий шаг — осуществление рефакторинга CSS-кода. В медиа-запрос для max-width в 600 пискелей добавлен CSS-код только для маленьких экранов. В медиа-запрос для min-width в 601 пиксель добавлен CSS-код для больших экранов.

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

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

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

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

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

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

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

Для просмотра медиа-запросов правительств меню Device Mode и выберите Показать медиа-запросы (Показать медиа-запросы), чтобы отобразить точку остановки в виде цветных полос на странице.

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

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