Эта статья подробно объяснила концепцию отзывчивого макета, преимуществ и недостатков отзывчивого макета, концепций проектирования и конкретного кода реализации. Это редкая статья. Здесь мы рекомендуем его друзьям . Что такое отзывчивый макет?
Отзывчивый макет - это концепция, предложенная Итаном Маркоттом в мае 2010 года. Короче говоря, веб -сайт может быть совместим с несколькими терминалами, а не создавать определенную версию для каждого терминала.
Эта концепция была рождена для решения просмотра мобильного интернета. Адаптивная макет может предоставить пользователям разные терминалы более удобным интерфейсом и лучшим пользовательским опытом. Более того, благодаря текущей популяризации мобильных устройств крупноэкранов, это не преувеличение, описывать это как общую тенденцию.
Поскольку все больше и больше дизайнеров принимают эту технологию, мы видим не только много инноваций, но и некоторые сформированные модели.
2. Каковы преимущества и недостатки отзывчивого макета? преимущество:Сильная гибкость перед лицом различных устройств разрешения
Может быстро решить задачи адаптации с несколькими устройствами
недостаток:Совместим с различным оборудованием, высокой рабочей нагрузкой и низкой эффективностью
Код громоздкий, и появятся скрытые и бесполезные элементы, которые увеличат время загрузки.
Фактически, это компромиссное проектное решение, которое не может достичь наилучших результатов из -за влияния нескольких факторов.
В определенной степени исходная структура макета веб -сайта будет изменена, и возникнет путаница пользователя
3. Как разработать отзывчивый макет?1. Как решить проблему совместимости между различными устройствами?
Медиа -запрос в CSS3 может решить эту проблему.
2. Какие значения могут получить Media Query?
Устройство устройства, Heign-Heigth отображает экран/тактильное устройство.
Визуал ширину и высоту окна, Hegth отображает экран/тактильное устройство.
Руковолочное направление устройства, горизонтальная или вертикальная ориентация (портрет | Lanscape) и принтер и т. Д.
Принтер аспекта экрана-точечный матричный принтер и т. Д.
Соотношение устройства устройства-а-а-а-а-а-а-то-дот-принтер и т. Д.
Цвет объекта или цвет цвета, цветовой индекс отображает экран.
Разрешение устройства
3. Синтаксическая структура и использование
Синтаксис: только имя устройства @media (выберите условие), а не (выберите условие) и (условие выбора устройства), устройство два {srules}
Использование:
а Пример 1: Используйте @Media в ссылке:
<Link rel = styleSheet type = text /css media = только экран и (максимальная ширина: 480px), только экран и (максимальная ширина: 480px) href = link.css rel = venerw nofollow />
Только в приведенном выше использование может быть опущено и ограничено монитором компьютера. Первое условие максимальной шириной относится к максимальной ширине интерфейса рендеринга, а второе условие максимальной шириной ширины относится к максимальной ширине устройства.
беременный Внедрить @Media в таблицу стиля:
Скопировать код