Определение реактивного веб-дизайна

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

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

Примеры отзывчивого дизайна сайта

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

Если у вас в сетке есть сетка, в которой 10 миниатюр удобно помещаются на типичном мониторе настольного компьютера, эти миниатюры должны быть очень маленькими, чтобы соответствовать 10 на iPad или iPhone. Благодаря адаптивному дизайну вы можете изменить его так, чтобы, если ширина устройства была такой же маленькой, как у iPad, на нем было всего 7 миниатюр. Тогда, возможно, 4 для iPhone.

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

Отзывчивый веб-дизайн против Жидкие макеты

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

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



Source by Joe Rhoney

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *