Введение статьи Wulin.com (www.vevb.com): отзывчивый веб -дизайн.
С популярностью 3G все больше и больше людей используют свои мобильные телефоны для серфинга в Интернете.
Мобильные устройства превосходят настольные устройства и становятся самым распространенным терминалом для доступа к Интернету. Итак, веб -дизайнеры должны столкнуться с трудной проблемой: как они могут представить одну и ту же веб -страницу на устройствах разных размеров?
Экран мобильного телефона относительно небольшой, обычно ниже 600 пикселей; Ширина экрана ПК, как правило, превышает 1000 пикселей (в настоящее время основная ширина составляет 1366 × 768), а некоторые даже достигают 2000 пикселей. Нелегко получить удовлетворительные результаты на экранах разных размеров.
Решение многих веб -сайтов заключается в предоставлении различных веб -страниц для различных устройств, таких как предоставление мобильной версии или версии iPhone/iPad. Это обеспечивает эффект, но это довольно хлопотно. Это требует поддержания нескольких версий. Более того, если на веб -сайте есть несколько порталов, он значительно увеличит сложность дизайна архитектуры.
Следовательно, некоторые люди давно предполагают, можно ли его разработать за один раз и, как правило, применимо к одной и той же веб -странице, автоматически адаптируется к экранам разных размеров, и автоматически регулирует макет в соответствии с шириной экрана?
1. Концепция адаптивного веб -дизайна
В 2010 году Итан Маркотт предложил термин «Адаптивный веб -дизайн», который относится к веб -дизайну, который может автоматически распознавать ширину экрана и вносить соответствующие корректировки.
Он сделал пример портретов шести главных героев приключений Шерлока Холмса. Если ширина экрана превышает 1300 пикселей, 6 изображений находятся в ряду бок о бок.
Если ширина экрана составляет от 600 пикселей до 1300 пикселей, 6 изображений разделены на две линии.
Если ширина экрана составляет от 400 пикселей до 600 пикселей, навигационная полоса перемещается к головке страницы.
Если ширина экрана ниже 400 пикселей, 6 изображений разделены на три строки.
У Mediaqueri.es есть больше таких примеров, как это выше.
Здесь также есть тестовый виджет, который может одновременно отображать тестовые эффекты экранов с различными разрешениями на веб -странице. Я рекомендую установить его.