Описание тега responsive-design

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

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

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

Начало

Адаптивный веб-дизайн зародился, когда он был впервые сформулирован в качестве теории Итаном Маркоттом. В его статье " Адаптивный веб-дизайн", опубликованной в мае 2010 года в журнале A List Apart, были изложены основные элементы создания адаптивного веб-сайта и описаны начальные методы создания гибкого дизайна.

Совместимость с браузером

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

Текущие проблемы

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

W3C предложили <picture>элемент и <img srcset="">атрибут для исправления этой ситуации, однако он еще не реализован во всех основных браузерах.

Быстрый запуск с RWD

Хотя многие разработчики решили управлять RWD самостоятельно, существует несколько готовых к реагированию фреймворков HTML5, из которых вы можете выбрать, чтобы сразу приступить к работе.

Подробнее об адаптивном веб-дизайне

Связанные теги