определение

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

преимущество

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

недостаток

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

Отзывчивая и адаптивная разница

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

Метод адаптивного макета 1: Медиа-запросы

использовать@mediaМедиазапросы могут определять разные стили для разных типов мультимедиа, особенно для адаптивных страниц.Можно написать несколько наборов стилей для разных размеров экрана для достижения адаптивных эффектов. Например:

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}

Вышеприведенный код определяет несколько наборов стилей с помощью медиа-запросов и устанавливает максимальное разрешение, когда стиль вступает в силу через max-width.Приведенные выше коды используются для экранов с разрешением 0～320px, 320px～550px, 550px～768px и 768px. ～960px соответственно.Заданы разные цвета фона.

С помощью медиа-запросов можно добиться адаптивных макетов, написав разные стили для устройств с разным разрешением.Например, мы устанавливаем разные фоновые изображения для экранов с разным разрешением. Например, установку изображений @2x для мобильных телефонов с маленьким экраном и изображений @3x для телефонов с большим экраном можно легко реализовать с помощью медиа-запросов.

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

Адаптивный метод макета 2: процент %

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

Процент свойств высоты и ширины зависит от ширины и высоты родительского тега. но,Отличается ли ситуация с padding, border, margin и другими свойствами?

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

недостаток

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

Третий метод адаптивного макета: vw/vh

В CSS3 была введена новая единица vw/vh, которая связана с окном просмотра, vw представляет ширину относительно окна просмотра, а vh представляет высоту относительно окна просмотра. Для любого элемента уровня, в случае единиц vw, 1vw равно 1% ширины представления.

Аналогично процентному расположению, но лучше.

Четвертый метод адаптивного макета: rem

Единица rem относится к размеру шрифта элемента html, также известного как корневой элемент. По умолчанию размер шрифта html-элементов составляет 16 пикселей. Итак, на данный момент 1rem = 16px.

первое издание

@media screen and (max-width: 414px) {
  html {
    font-size: 18px
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 16px
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 12px
  }
}

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

Оптимизировано

//动态为根元素设置字体大小
function init () {
    // 获取屏幕宽度
    var width = document.documentElement.clientWidth
    // 设置根元素字体大小。此时为宽的10等分
    document.documentElement.style.fontSize = width / 10 + 'px'
}

//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

Понимание: Приведенный выше код понимает, что как бы ни менялось видимое окно устройства, rem всегда устанавливается на 1/10 ширины, то есть реализуется процентная раскладка. Не такой жесткий, как медиа-запросы в первом издании.

Приведенный выше код должен быть написан перед домом (можно поместить в первый тег скрипта в голове)

Отзывчивый макет с фреймворком пользовательского интерфейса

На самом деле, текущие основные UI-фреймворки будут учитывать проблему адаптивного макета, например, elementUI, iview и другие фреймворки.сеткасистема,<row>соответствовать<col>для достижения адаптивного макета. Так что просто используйте его прямо на работе, и все готово.

Окно просмотра адаптивного макета для мобильных устройств

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width=device-width: ширина адаптивного экрана мобильного телефона.
максимальный масштаб: максимальное значение коэффициента масштабирования.
минимальный масштаб: минимальный масштаб для масштабирования.
Initial-scale: это инициализация масштабирования.
масштабируемый пользователем: масштабируемая пользователем операция.

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

flexible.js

flexible.jsОн был разработан командой Alisandao. Он используется для решения проблемы адаптации мобильного терминала.

Предположим, теперь вы хотите адаптироваться к устройству iphone6.
- Дизайнер дал эскиз дизайна с шириной 750px (обратите внимание, что здесь 750px вместо 375px)
- Разработчики внешнего интерфейса начинают восстанавливать с этим соотношением 750 пикселей.
- Преобразование ширины и высоты px в rem
- Шрифты используют px вместо rem
- flexible.jsОн автоматически определит dpr для масштабирования всего окна просмотра макета.
Что касаетсяflexible.jsКак им пользоваться можете поискать сами, т.к. по мобильному терминалу я мало что делал, поэтому больше говорить не буду.

Справочная статья

Сводка по адаптации внешнего мобильного терминала

Принцип и схема адаптивной верстки фронтенда (подробная версия

Сравнение распространенных решений для адаптивных макетов (медиа-запросы, проценты, rem и vw/vh)

Добро пожаловать на мой блог