Резюме и опыт адаптации мобильных терминалов и ПК-терминалов (1) (может быть более полным

Написано ранее, у меня есть 3 года опыта разработки интерфейса. Я знал только rem для концепции адаптации в начале. Я очень смутно отношусь к различным методам компоновки или идеям адаптации, и нет систематической концепции, поэтому я сделал некоторые домашнее задание. , также упоминается много отличных сообщений в блогах~ Добро пожаловать, чтобы добавить~

Проведите следующую часть~ ☞Резюме и опыт адаптации мобильных терминалов и ПК-терминалов (2) (может быть более полным

1. Родственные понятия

1 пиксель

1. Пиксели

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

2. Разрешение

Разрешение экрана: количество пикселей по горизонтали и вертикали экрана, единица измерения — px.

Экран одинакового размера Чем ниже разрешение, тем больше размер единичного пикселя, чем выше разрешение, тем меньше размер единичного пикселя

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

Для изображений одинакового размера чем выше разрешение, тем четче изображение.

3.`PPI`

пикселей на дюйм

PPIМожет использоваться для описания четкости экрана и качества изображения.PPIЧем выше, тем четче экран.

4. Физические пиксели устройства (физическое разрешение)

Реальное разрешение устройства Сколько пикселей у экрана это разрешение

Взяв в качестве примера iphone 6, физическое разрешение составляет 750 * 1334, что соответствует количеству светодиодов внутри дисплея.

5. Независимые от устройства провалы пикселей (логическое разрешение)

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

Взяв в качестве примера iphone6, провалы составляют 375*667, что означает 2*2 физических пикселя в качестве независимого от устройства пикселя.

Различные устройства, мобильные телефоны, планшеты, ноутбуки и другие логические пиксели

Мобильный: Логические пиксели между 3xx-4xx (короткая сторона)

Планшет: 10-дюймовый планшет 7xx-8xx (короткая сторона)

Ноутбук: 13 дюймов 1280 (длинная сторона)

24-дюймовый дисплей: 1920 (длинная сторона)

6. Соотношение пикселей устройства dpr

Отношение физических пикселей к независимым от устройства пикселям

Пиксель в CSS — это просто абстрактная единица. На разных устройствах или в разных средах физические пиксели устройства, представленные 1px в CSS, различаются. 1px не является абсолютным, он представляет собой наименьшую единицу текущего пикселя устройства.

На ПК 1 пиксель равен физическому пикселю устройства, но плотность пикселей экрана мобильных устройств становится все выше и выше.На iphone 6 один пиксель CSS равен двум физическим пикселям.dpr, мы можем узнать, сколько физических пикселей представляет пиксель CSS на устройстве.

получить дпр:js:

window.devicePixelRatio

css:

-webkit-min-device-pixel-ratio
React Native: PixelRatio.get()

почему логический пиксель айфона 6 равен 375, а проектная ширина 750

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

7. css-пиксели

Пиксели CSS, когда масштаб страницы100%когдаCSS像素Равен одному независимому от устройства пикселю.

ноCSS像素легко меняется, когда пользователь увеличивает масштаб браузера,CSS像素будет увеличиваться, когдаCSS像素охватит больше физических пикселей.

页面的缩放系数 = CSS像素 / 设备独立像素.

2 окна просмотра

1. Окно просмотра макетаlayout viewport

Окно просмотра макета: видимая область текущего браузера, за исключением строки меню и пользовательского интерфейса браузера.Не включает полосы прокруткиЖдать

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

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

Однако, если начальное значение масштаба не указано на iphone и ipad, тогда iphone и ipad автоматически вычислят значение начального масштаба, чтобы гарантировать, что ширина текущего окна просмотра макета равна ширине видимой области браузера после масштабирования.

//获取布局视口宽度
document.documentElement.clientWidth / Height

2. Визуальное окно просмотраvisual viewport

Визуальное окно просмотра: область, которую в данный момент видит пользователь, включая полосы прокрутки и т. д. По умолчанию соответствует размеру окна текущего браузера.

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

Предполагая, что экрану изначально требовалось 200 пикселей CSS для заполнения экрана, из-за увеличения масштаба теперь для заполнения требуется только 100 пикселей CSS, поэтому ширина визуального окна просмотра становится равной 100 пикселям.

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

//获取视觉窗口宽度
window.innerWidth

3. Идеальное окно просмотраideal viewport

Идеальный размер окна просмотра макета, который идеален только в том случае, если размер окна просмотра макета равен размеру экрана устройства.

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

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

//获取理想视口宽度
window.screen.width

4. Как получить идеальное окно просмотра на мобильном телефоне

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

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

Визуальный вьюпорт равен идеальному вьюпорту.CSSПиксель равен 1 независимому от устройства пикселю, и мы также делаем разметку на основе идеального окна просмотра, поэтому макет отображаемой страницы может быть примерно одинаковым на разных устройствах.

Чтобы установить текущую ширину области просмотра на идеальную ширину области просмотра, вы можете установить ширину=ширину устройства или начальную шкалу=1, но оба имеют небольшой недостаток, то есть iphone, ipad и IE будут отображать горизонтальные и вертикальные экраны. В любом случае, идеальная ширина области просмотра вертикального экрана должна превалировать. Следовательно, наиболее совершенным способом написания должно быть написание обоих, так что initial-scale=1 решает проблему iphone и ipad, а width=device-width решает проблему IE:

Коэффициент масштабирования страницы = идеальная ширина области просмотра / ширина области просмотра макета

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

Ссылаться на:Разрешение области просмотра

5. Общий размер окна сбора данных

window.innerHeight: получить высоту визуального окна просмотра браузера (включая вертикальные полосы прокрутки).
window.outerHeight: получить высоту за пределами окна браузера. Представляет высоту всего окна браузера, включая боковые панели, оконный хром и границы изменения размера окна.
window.screen.Height: Получите экран, чтобы получить идеальную высоту области просмотра, это значение фиксировано,设备的分辨率/设备像素比
window.screen.availHeight: Доступная высота окна браузера.
document.documentElement.clientHeight: получить высоту области просмотра макета браузера, включая отступы, но исключая вертикальные полосы прокрутки, границы и поля.
document.documentElement.offsetHeight: включает отступы, полосы прокрутки, границы и поля.
document.documentElement.scrollHeight: минимальная ширина, необходимая для размещения всего в окне просмотра без использования полос прокрутки. измерения иclientHeightТо же самое: он включает заполнение элемента, но не границы, поля или вертикальные полосы прокрутки.

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

2. Распространенные схемы компоновки

固定布局：Пиксели — основная единица страницы., вне зависимости от экрана устройства и ширины браузера, проектируется только один набор размеров; Переключаемый фиксированный макет: в качестве единицы страницы используется один и тот же пиксель, а несколько наборов макетов разной ширины разработаны с учетом размера основного устройства. Выберите наиболее подходящий набор макетов ширины, указав размер экрана или ширину браузера;

弹性布局：Используйте проценты в качестве базовой единицы страницы, который может адаптироваться ко всем размерам экранов устройств и ширине браузера в определенном диапазоне и может идеально использовать эффективное пространство, чтобы показать наилучший эффект; 混合布局：Подобно гибкому макету, он может адаптироваться ко всем размерам экранов устройств и ширине браузера в определенном диапазоне и может идеально использовать эффективное пространство для демонстрации наилучшего эффекта;Просто смешайте пиксели и проценты в качестве единиц страницы.. 布局响应：Для реализации адаптивного дизайна страницы необходимо разработать макет одного и того же контента с разной шириной., есть два способа: pc-first (дизайн со стороны ПК вниз); mobile-first (дизайн со стороны мобильных устройств вверх); независимо от того, на каком типе дизайна основан, чтобы быть совместимым со всеми устройствами, ответ макета неизбежно должен реагировать на модуль Внесите некоторые изменения в макет (критическая точка, где изменения макета называются точками останова)

макет на стороне ПК

1. Медиа-запросы

Размер разрешения основной системы

Тогда давайте взглянем на текущие основные системы и разрешения.

PC & MAC & Chrome

常用
1280 x 800
1366 x 1024 (IPad Pro)
1440 x 900
1680 x 1050
1600 x 900
1920 x 1200
2560 x 1440
更高忽略
2880 x 1620
3200 x 1800
5120 x 2880

ПК и Windows и Chrome (или ПК и MAC и Chrome и периферийный дисплей)

1280 x 720/1024
1366 x 768
1440 × 900
1600 x 900
1920 x 1080

Mobile & Android

360 x 480
412 x 732
...

Mobile & IOS

IPhone 6:         375 x 667
IPhone 6 Plus:    414 x 736
IPhone X:         375 x 812

iPad, который не поднимается и не опускается:

768 x 1024

общий стиль

设备范围
    默认样式    注意：默认样式要写在最前面
    /* 打印样式 */
        @media print {}
    /* 手机等小屏幕手持设备 */
        @media screen and (min-width: 320px) and (max-width: 480px) {}
    /* 平板之类的宽度 1024 以下设备 */
        @media only screen and (min-width: 321px) and (max-width: 1024px) {}
    /* PC客户端或大屏幕设备: 1028px 至更大 */
        @media only screen and (min-width: 1029px) {}
    /* 竖屏 */
        @media screen and (orientation:portrait) {对应样式}
    /* 横屏 */
        @media screen and (orientation:landscape){对应样式}

Мобильный прежде всего:

/* iphone6 7 8 */
body {
    background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: #FF00FF;
    }
}
/* pc */
@media screen and (min-width: 1100px) {
    body {
      background-color: black;
    }
}

ПК сначала:

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

Медиа-запрос плюс рем-макет

html{
   font-size:19.20px;  /*默认以设计稿为基准,将设计稿除100*/
   //1rem = 19.20px
}
@media only screen and (max-width: 1366px) {
	 //1rem = 13.66px;
   html{
      font-size:13.66px;
   }
}
#test{
   width:14.21875rem;
}

преимущество: Он обладает большой гибкостью перед устройствами с различным разрешением и может быстро решить проблему адаптации дисплея к нескольким устройствам.

недостаток:

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

2. Процентная раскладка

Через процентную единицу ширину и высоту компонента в браузере можно изменить с помощью высоты браузера, чтобы добиться адаптивного эффекта. Общая компоновка остается неизменной.Система сеток в Bootstrap использует проценты для определения ширины и высоты элементов.CSS3Поддержка максимальной и минимальной высоты, вы можете комбинировать проценты иmax(min)Используются вместе для определения ширины и высоты элементов на разных устройствах.

Метод проектирования: используйте % процента для определения ширины, а высота в основном фиксируется в px.Его можно настроить в соответствии с областью просмотра и размером родительского элемента в реальном времени, чтобы максимально адаптироваться к различным разрешениям. Он часто используется с такими атрибутами, как max-width/min-width, для управления диапазоном размера потока, чтобы он не был слишком большим или слишком маленьким, чтобы влиять на чтение.

Конкретный анализ в процентах

Процент высоты и ширины дочернего элемента/сверху и снизу, слева и справа относительно ширины и высоты родительского элемента

Отступ/поле дочернего элемента относительно вертикального или горизонтального направления.ширина непосредственного родительского элемента, независимо от высоты родительского элемента.

Приложение для макета в процентах

Установите padding-top в процентах, чтобы получить адаптивные блоки одинакового масштаба.

Адаптивный прямоугольник:

<div class="trangle"></div>

Установите стиль, чтобы сделать его адаптивным:

//这个长方形一直会是4:3
.trangle{
  height:0;
  width:100%;
  padding-top:75%;//相对于宽度的75%
}

Пример

/* pc width > 1100px */
html, body { margin: 0;padding: 0;width: 100%;height: 100%;}
aside {
    width: 10%;
    height: 100%;
    background-color: red;
    float: left;
}
main {
    height: 100%;
    background-color: blue;
    overflow: hidden;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    aside {
      width: 8%;
      background-color: yellow;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: green;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    aside {
      float: none;
      width: 100%;
      height: 5%;
      background-color: yellow;
    }
    main {
      height: calc(100vh - 5%);
      background-color: red;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: blue;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    aside {
      float: none;
      width: 100%;
      height: 3%;
      background-color: black;
    }
    main {
      height: calc(100vh - 3%);
      background-color: red;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    aside {
      float: none;
      width: 100%;
      height: 7%;
      background-color: green;
    }
    main {
      height: calc(100vh - 7%);
      background-color: red;
    }
}

недостаток:

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

3.rem макет

REMдаCSS3Недавно добавленный модуль хорошо поддерживается мобильным терминалом, поддерживаются как Android2.x+, так и ios5+.remЕдиницы относятся к корневому элементу htmlfont-sizeдля определения размера корневого элементаfont-sizeЭквивалентно предоставлению эталона, когда размер страницы изменяется, нужно только изменитьfont-sizeзначение, то сremРазмер элементов, которые являются фиксированными единицами, также изменяется в ответ. Следовательно, если поremЧтобы добиться адаптивного макета, вам нужно только динамически изменяться в соответствии с размером контейнера представления.font-sizeможет (покаemотносительно родительского элемента).

идеи адаптивного макета rem:

Как правило, не устанавливайте определенную ширину для элемента, но для некоторых небольших значков вы можете установить определенное значение ширины.
Значение высоты может быть установлено на фиксированное значение.Каким бы ни был проектный проект, мы будем строго ограничивать его размер.
Используются все установленные фиксированные значенияremСделайте единицы (сначала установите базовое значение в итоге HTML:pxиremСоответствующее соотношение , а потом получить его на рендерахpxзначение, которое преобразуется вremценность)
js получает ширину реального экрана, делит ее на ширину эскиза проекта, вычисляет соотношение и сбрасывает предыдущее эталонное значение в соответствии с соотношением, чтобы проект можно было адаптировать на мобильном терминале.

Пример 1:

Решение для полноэкранного 16:9

Когда css указывает длину, разделите длину на чертеже на 192, чтобы вычислить значение rem.

Напишите кусок js кода на странице, рассчитайте и установите по нашей формуле вышеhtml 元素的 font-sizeценность.
export function init(screenRatioByDesign: number = 16 / 9) {
  let docEle = document.documentElement
  function setHtmlFontSize() {
    var screenRatio = docEle.clientWidth / docEle.clientHeight;
    var fontSize = (
      screenRatio > screenRatioByDesign
        ? (screenRatioByDesign / screenRatio)
        : 1
    ) * docEle.clientWidth / 10;

    docEle.style.fontSize = fontSize.toFixed(3) + "px";
  }
  setHtmlFontSize()
  window.addEventListener('resize', setHtmlFontSize)
}
3. [версия веб-пакета] (GitHub.com/quelling B…)

4.исходный адрес

Пример 2:

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

Недостатки rem-макета:

В адаптивном макете корневой элемент должен динамически управляться через js.font-sizeРазмер стиля css и кода js имеют определенную степень связи и должны быть изменены.font-sizeКод помещается вcssперед стилем

REMВ настоящее время макет также является лучшим способом адаптации к нескольким экранам. По умолчанию наши html-тегиfont-sizeДля 16px мы используем медиа-запросы, чтобы установить размер шрифта для разных устройств.

4. Единица области просмотра vw

Схемы vh и vw делят ширину визуального окна просмотра window.innerWidth и высоту визуального окна просмотра window.innerHeight на 100 равных частей.

vw также является относительной единицей, она относится к области просмотра макета, 1vw составляет 1% от ширины области просмотра макета. Это по-прежнему знакомый стандартный дизайн iPhone6 шириной 750 пикселей. Тогда 1vw = 1% ширины вьюпорта, по чертежу проекта это 100vw = 750px, тогда 1vw = 7,5px.

Разница между vw и %:

единица измерения	значение
%	Большинство из них относятся к элементам-предкам, но также и к самим себе (граница-радиус, перевод и т. д.). Когда для body или html установлено значение width: 100%, ширина полосы прокрутки страницы не учитывается.
vw/vh	Относительно размера окна просмотра, не зависящего от родительского элемента 100vw включает ширину полосы прокрутки страницы, 100vw будет шире 100% при наличии вертикальной полосы прокрутки.

Единица vw похожа на процент, но есть разница. Ранее мы ввели сложность преобразования процентной единицы. Здесь vw больше похожа на "идеальную процентную единицу". Для любого элемента уровня, в случае единиц vw, 1vw равно 1% ширины представления.

недостаток:

pxпреобразовать вvwНе обязательно полностью делимые, поэтому есть определенная разница в пикселях.
например, когда контейнер используетсяvw,marginиспользоватьpx, легко привести к тому, что общая ширина превысит100vw, что влияет на эффект макета. Конечно, мы также можем избежать этого, например, используяpaddingзаменятьmargin, и совпадатьbox-sizingкомбинироватьcalc()использование функций и т. д.

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

По сравнению с компоновкой vw логика кода более чистая и понятная.

Есть два способа реализовать отзывчивость с помощью единиц измерения области просмотра:

1. Используйте только vw в качестве единицы CSS

Для перевода размера проектного чертежа в единицы измерения мы используемSassкомпиляция функций
```
//iPhone 6尺寸作为设计稿基准
$vm_base: 375; 
@function vw($px) {
    @return ($px / 375) * 100vw;
}
```

Используются как ширина текста, так и макета, интервалы и т. д.vwкак единое целое

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10); // 内间距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10); // 字体大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40); // 宽度
                height: vm(40); // 高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

Линия физического пикселя в 1 пиксель (то есть 1 пиксель на обычном экране, 0,5 пикс на экране высокой четкости) принимаетtransformАтрибутыscaleвыполнить

.mod_grid {
    position: relative;
    &::after {
        // 实现1物理像素的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

Для изображений, которым необходимо поддерживать пропорции, следует использоватьpadding-topвыполнить

.mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}

5. С фольксвагеном и рем

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

Установите размер корневого элемента для изменения в области просмотраvwюнит, поэтому вы можете динамически изменять его размер

Ограничьте максимальный и минимальный размер шрифта корневого элемента с помощьюbodyплюс максимальная ширина и минимальная ширина

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

6. Отзывчивое изображение

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

1. Используйте максимальную ширину (адаптивное изображение):

Адаптивность изображения означает, что изображение можно масштабировать в соответствии с размером контейнера. Можно использовать следующий код:

img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

inline-blockСводный встроенный элемент, чтобы сформировать вокруг него, однако разница связана с той, в этом случае мы можем установить ширину и высоту.max-widthГарантируется, что изображение может быть расширено с той же шириной, что и контейнер (то есть для обеспечения того, чтобы все изображения отображались максимум на 100% от самих себя. В это время, если элемент, содержащий изображение, меньше, чем собственной ширины изображения, изображение будет масштабироваться, чтобы заполнить максимально доступное пространство), иheightзаautoЭто может обеспечить пропорциональное масштабирование изображения без искажений. Если это фоновое изображение, используйте его гибкоbackground-sizeАтрибуты.

Так почему бы не использоватьwidth：100%Шерстяная ткань? Потому что это правило заставит его казаться таким же широким, как и его контейнер. В случаях, когда контейнер намного шире изображения, изображение будет излишне растянуто.

2. Используйте исходный набор

<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">

Если dpi экрана = 1, будет загружено изображение 1x, а если dpi = 2, будет загружено изображение 2x. В основном, dpi как мобильных телефонов, так и компьютеров Mac достигло 2 или более, так что для обычных экранов это не будет тратить трафик, но для сетчатки Экран имеет опыт высокой четкости.

Если браузер не поддерживаетsrcset, изображение в src загружается по умолчанию.

Но вы обнаружите, что это не так, в Chrome на Mac он загружается одновременноsrcsetТот внутри 2x, а тот внутри src будет загружен снова, и будут загружены две картинки. Приказ поставить всеsrcsetПосле завершения загрузки перейдите к загрузке файла src. Эта стратегия довольно странная, на самом деле загружает два изображения, если src не прописан, то два изображения не загружаются, но совместимость не очень. Это может быть связано с тем, что браузер считает, что, поскольку существуетsrcsetНет необходимости писать src.Если src написан, пользователь может быть полезен. при использованииpictureне загружается два

3. Используйте фоновое изображение

.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}

4. Используйте тег изображения

picturefill.min.js: Решить проблему, что браузеры, такие как IE, не поддерживают его.

<picture>
    <source srcset="banner_w1000.jpg" media="(min-width: 801px)">
    <source srcset="banner_w800.jpg" media="(max-width: 800px)">
    <img src="banner_w800.jpg" alt="">
</picture>

<!-- picturefill.min.js 解决IE等浏览器不支持 <picture> 的问题 -->
<script type="text/javascript" src="js/vendor/picturefill.min.js"></script>

pictureТег img должен быть прописан, иначе его нельзя отобразить, даpicturОперация e, наконец, на img, Например, событие onload запускается в теге img.pictureиsourceМакета не будет, их ширина и высота равны 0.

дополнительно использоватьsource, вы также можете выполнить некоторую совместимую обработку для формата изображения:

<picture>
    <source type="image/webp" srcset="banner.webp">
    <img src="banner.jpg" alt="">
</picture>

7. Некоторые частные случаи

свойство масштабирования

document.body.style.zoom = window.screen.width / 1920;

Плагин для одноэкранного приложения ScaleEle

8. Литье под ПК

использоватьremДля адаптации шрифта используйтеsrcsetЧтобы сделать изображение отзывчивым, можно использовать ширинуrem,flex, система сеток и т. д. для достижения отзывчивости, и тогда вам может понадобиться использовать медиазапросы как основу для адаптивной верстки.Поэтому, комбинируя приведенные выше схемы реализации, вам необходимо обратить внимание на следующие моменты при реализации адаптивной верстки в вашем проекте :

установить область просмотра
запросы средств массовой информации
Адаптация шрифта (шрифтовая единица)
процентное расположение
Адаптация изображения (отзывчивость изображения)
В сочетании с flex, grid, BFC, grid system и другими уже сформированными решениями
Смешанное использование потоковых макетов (т. е. процентных макетов) и медиа-запросов

Решение для адаптации мобильного терминала

Общие принципы мобильной разработки:Поток текста, гибкость управления, масштабирование изображения.

1. Медиа-запросы

Медиа-запросы можно комбинировать с процентными или гибкими макетами, чтобы настроить определенные модули в соответствии с определенной шириной экрана.
Другой способ заключается в объединении rem для установки разных размеров шрифта rem для устройств с разной шириной экрана.

Тот же принцип, что и выше

2.схема видового экрана

Прямопропорциональное масштабирование

<script>
    const scale = window.screen.width / 750
    document.write(`<meta name="viewport" content="initial-scale=${scale}">`)
</script>

Недостатки: Слишком грубо, настройка вьюпорта влияет на весь мир, и места которые не нужно масштабировать тоже будут масштабироваться, а так же могут влиять сторонние библиотеки

3.рем адаптация

1. гибкое адаптационное решение (команда Alibaba)

Гибкость руки Taobao решает проблему границы в 1 пиксель и использует rem для реализации схемы перехода vw, пропорционально масштабируемой на разных устройствах (техническое обслуживание остановлено)

Применимые сценарии: пропорциональное масштабирование отображаемой страницы с большим количеством изображений или простой бизнес

смысл:

// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();

Писать для шрифтов

document.documentElement.setAttribute('data-dpr', dpr)

Обработайте побочные эффекты границы 1px, чтобы при написании css вы могли установить фиксированный размер для разных dpr:

div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
    font-size: 24px;
}
[data-dpr="3"] div {
    font-size: 36px;
}

2. Медиа-запрос + rem (внешняя команда NetEase)

Версия js изменяет размер шрифта html.

$("html").css("font-size",document.documentElement.clientHeight/document.documentElement.clientWidth<1.5 ? (document.documentElement.clientHeight/603*312.5+"%") : (document.documentElement.clientWidth/375*312.5+"%"));
//单屏全屏布局时使用,短屏下自动缩放
//$("html").css("font-size",document.documentElement.clientWidth/375*312.5+"%");
//长页面时使用,不缩放

Запрос мультимедиа CSS для изменения размера шрифта html

Медиа-запрос не работает в конце концов.Он существует только для предотвращения отображения страницы до загрузки js.После того, как js загружается позже, стиль страницы слишком сильно меняется, и страница прыгает, и опыт не очень хороший .

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%;
}
html {
  font-size: 312.5%;
}
@media screen and (max-width: 359px) and (orientation: portrait) {
  html {
    font-size: 266.67%;
  }
}
@media screen and (min-width: 360px) and (max-width: 374px) and (orientation: portrait) {
  //(375/360)*312.5%=300%，
  html {
    font-size: 300%;
  }
}
@media screen and (min-width: 384px) and (max-width: 399px) and (orientation: portrait) {
  html {
    font-size: 320%;
  }
}
@media screen and (min-width: 400px) and (max-width: 413px) and (orientation: portrait) {
  html {
    font-size: 333.33%;
  }
}
@media screen and (min-width: 414px) and (max-width: 431px) and (orientation: portrait) {
  html {
    font-size: 345%;
  }
}
@media screen and (min-width: 432px) and (max-width: 479px) and (orientation: portrait) {
  html {
    font-size: 360%;
  }
}
@media screen and (min-width: 480px) and (max-width: 639px) and (orientation: portrait) {
  html {
    font-size: 400%;
  }
}
@media screen and (min-width: 640px) and (orientation: portrait) {
  html {
    font-size: 533.33%;
  }
}

HTML принимает базовое значение 312,5% для удобства расчета. Шрифт страницы по умолчанию 16 пикселей, мы устанавливаем шрифт корневого узла на 312,5%, затем это 16 * 312,5% = 50 пикселей, что соответствует 100 пикселей на черновике дизайна, тогда элемент 100 пикселей на черновике дизайна можно записать как 1rem в таблице стилей.

недостаток:

Значение font-size корневого элемента сильно завязано, и при увеличении или уменьшении системного шрифта верстка будет неупорядоченной; второй недостаток: в заголовок html-файла нужно вставлять кусок js-кода
Адаптация размера мобильного терминала не имеет ничего общего с dpr.Помимо решения Taobao, другие решения имеют проблему 1px, но также уменьшают проблемы с отзывчивой обработкой для разных устройств dpr.

4. vw / vh макет

Конкретная практика: вы можете использовать postcss-px-to-viewport плагина загрузчика webpack postcss-loader для преобразования px в vw

{
    loader: 'postcss-loader',
    options: {
    plugins: ()=>[
        require('autoprefixer')({
        browsers: ['last 5 versions']
        }),
        require('postcss-px-to-viewport')({
        viewportWidth: 375, //视口宽度（数字)
        viewportHeight: 1334, //视口高度（数字）
        unitPrecision: 3, //设置的保留小数位数（数字）
        viewportUnit: 'vw', //设置要转换的单位（字符串）
        selectorBlackList: ['.ignore', '.hairlines'], //不需要进行转换的类名（数组）
                minPixelValue: 1, //设置要替换的最小像素值（数字）
                mediaQuery: false //允许在媒体查询中转换px（true/false）
        })

    ]

}

5.vw+rem компоновка

метод 1

Принцип: используйте vm для изменения размера шрифта html и используйте rem для пропорционального масштабирования.

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
    font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

использовать

#app {
            width: 100%;
            .container {
                padding: rem(20) rem(20) rem(20) rem(20)
                .main {
                    width 100%
                }
            }
        }

Способ 2

На основе эскиза дизайна 750 (преобразованного в изображение 1x) с помощью преобразования pxtorem установите размер шрифта на 16

Почему 16, потому что мы написали его по дублированному изображению в первом шаге.Если вы не хотите больше использовать rem, вы можете напрямую удалить pxtorem и восстановить код прямо в px
Добавьте настройки шрифта для html перед css, я использую меньше

.font-size(@sizeValue:16) {
  @vw: 16 / 375 * 100;
  @result: @sizeValue / 16 * @vw;
  font-size: ~"@{result}vw";
}
html {
  .font-size(16);
}
html {
  @media screen and (max-width: 320px) {
    .font-size(16);
  }
  @media screen and (min-width: 480px) {
    .font-size(13);
  }
}

Суть решений vw и rem заключается в «равном масштабировании», поскольку vw и rem являются относительными единицами длины, которые вполне могут удовлетворить это требование. Разница в том, что vw составляет 1% от ширины области просмотра, а rem — это размер шрифта html-элемента. Когда мы связываем размер шрифта элемента html с шириной области просмотра, rem может имитировать эффект использования vw для макета.

6. гибкий гибкий макет

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

Функции: Поток текста, гибкость управления, масштабирование изображения

Зачем использовать гибкую верстку

У макета с плавающей запятой есть побочные эффекты: если дочерний элемент настроен как плавающий, это приведет к коллапсу родительского элемента/невозможность динамической реализации адаптивного макета/невозможно правильное выражение заданного отступа/предыдущий элемент является плавающим, а последний элемент может быть не на своем месте, поэтому страница становится все больше и больше Чем она сложнее, тем сложнее ею управлять

Плавающий макет не подходит для мобильного макета, поэтому существует гибкий макет.

Элементы, размещенные во Flex, называются Flex Containers. Все его дочерние элементы автоматически становятся членами контейнера.

свойства гибкого контейнера

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1. свойство flex-direction

Свойство flex-direction определяет направление главной оси (то есть направление, в котором располагаются элементы).

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
//依次表示主轴为水平方向，起点在左端。（默认）
//主轴为水平方向，起点在右端。
//主轴为垂直方向，起点在上沿。
//主轴为垂直方向，起点在下沿。

2. свойство flex-wrap

По умолчанию элементы располагаются на линии (она же «ось»). Свойство flex-wrap определяет способ переноса, если одна ось не подходит.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
  //依次是不换行
  //换行，第一行在上方。
  //换行，第一行在下方。
}

3. свойство гибкого потока

Свойство flex-flow является сокращением для свойства flex-direction и свойства flex-wrap Значением по умолчанию является row nowrap.

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4. свойство justify-content (это очень важно и часто используется)

Свойство justify-content определяет выравнивание элементов по главной оси.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
  //依次是左对齐（默认值）
  //右对齐
  //居中
  //两端对齐，项目之间的间隔都相等。
  //每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
}

5. атрибут align-items (это тоже очень важно. Также часто используется)

Свойство align-items определяет, как элементы выравниваются по поперечной оси.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
  //依次是交叉轴的起点对齐。
  //交叉轴的终点对齐。
  //交叉轴的中点对齐。
  //项目的第一行文字的基线对齐。
  //如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）
}

6. свойство align-content

Свойство align-content определяет выравнивание нескольких осей. Это свойство не действует, если элемент имеет только одну ось.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  //依次是与交叉轴的起点对齐。
  //与交叉轴的终点对齐。
  //与交叉轴的中点对齐。
  //与交叉轴两端对齐，轴线之间的间隔平均分布。
  //每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  //轴线占满整个交叉轴。（默认值）
}

свойства проекта

order
flex-grow
flex-shrink
flex-basis
flex
align-self

1. заказать недвижимость

Свойство order определяет порядок сортировки элементов. Чем меньше значение, тем выше рейтинг, по умолчанию 0.

.item {
  order: <integer>;
}

2. свойство flex-grow (очень важно)

Свойство flex-grow определяет коэффициент увеличения элемента, по умолчанию 0, то есть если осталось место, он не будет увеличен.

Если все элементы имеют свойство flex-grow, равное 1, они будут делить оставшееся пространство (если оно есть) поровну. Если один элемент имеет свойство flex-grow, равное 2, а все остальные элементы равны 1, первый займет в два раза больше оставшегося места, чем другие элементы.

.item {
  flex-grow: <number>; /* default 0 */
}

3. свойство flex-shrink

Свойство flex-shrink определяет коэффициент сжатия элемента, по умолчанию равен 1, то есть если места недостаточно, элемент сожмется.

Если свойство flex-shrink всех элементов равно 1, при недостатке места они будут пропорционально уменьшены. Если свойство flex-shrink одного элемента равно 0, а других элементов равно 1, первый не будет сжиматься при недостатке места.

Примечание. Отрицательные значения недопустимы для этого свойства.

.item {
  flex-shrink: <number>; /* default 1 */
}

4. свойство flex-basis (это ключевой момент, часто используемый)

Свойство flex-basis определяет основной размер, который занимает элемент перед выделением лишнего пространства. На основе этого свойства браузер вычисляет, есть ли лишнее место на главной оси. Его значение по умолчанию — auto, что соответствует исходному размеру элемента.

Для него можно установить то же значение, что и для свойства ширины или высоты (например, 350 пикселей), и элемент будет занимать фиксированное пространство.

5. свойство flex (это самое важное)

Свойство flex является сокращением для flex-grow, flex-shrink и flex-basis со значением по умолчанию 0 1 auto. Последние два свойства являются необязательными.

.item {
//该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
//建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

6. свойство align-self

Свойство align-self позволяет одному элементу иметь выравнивание, отличное от других элементов, переопределяя свойство align-items. Значение по умолчанию — auto, что означает наследование свойства align-items родительского элемента.Если родительского элемента нет, это эквивалентно растягиванию.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  //这个其实就是在项目里用align-items 注：auto为默认值
}

6.1 Практическое применение Flex

Обычно используемый гибкий 1

flex — это сокращение от flex-grow, flex-shrink, flex-basis.

Когда значение flex равно none, расчетное значение равно 0 0 auto

.div {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

Когда значение flex равно auto, расчетное значение равно 1 1 auto.

.div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;}

Когда flex является неотрицательным числомЗатем число flex-grow, flex-shrink принимает значение 1, flex-basis принимает значение 0% (наиболее распространенный вариант).

 .div {
    flex-grow: 1;//要取的值
    flex-shrink: 1;//默认
    flex-basis: 0%;//默认
}

Когда flex принимает длину или процент, считается значением flex-basis, flex-grow принимает значение 1, flex-shrink принимает значение 1

 .div {
    flex-grow: 1;//默认
    flex-shrink: 1;//默认
    flex-basis: 0%;//要取得值
}

Когда flex принимает значение двух неотрицательных чисел, считается значением flex-grow и flex-shrink соответственно, а flex-basis принимает 0%

 .div {
    flex-grow: 1;//要取的第一个值
    flex-shrink: 1;//要取的第二个值
    flex-basis: 0%;//默认
}

Когда flex принимает неотрицательное число и длину или процент, считается значением flex-grow и flex-basis соответственно, flex-shrink принимает 1

.div {
    flex-grow: 1;//要取的第一个值
    flex-shrink: 1;//默认
    flex-basis: 0%;//要取的第二个值
}

6.2 гибкий общий макет

flex реализует макет с равным делением

.box{
            height: 500px;
            display: flex;
}
.box div{
             height: 300px;
             border: 1px solid #000000;
             flex: 1;//这就是flex：1的妙用
}
    div class="box">
        <div>等分效果</div>
        <div>等分效果</div>
    </div>

Левый фиксированный, правый адаптивный

   .box {
            height: 500px;
            display: flex;
        }
        .box div {
            height: 300px;
            text-align: center;
        }
        .box div.right {
            flex: 1;//右边自适应
            border: 1px solid #000000;
        }
        .box div.left {
            border: 1px solid #000000;
            flex-basis: 100px;//左边固定,优先级最高
        }
    //html
    <div class="box">
        <div class="left">左边固定效果</div>
        <div class="right">右边自适应效果</div>
    </div>

Если содержимое адаптивной стороны выходит за пределы диапазона, добавьте в место адаптивной атрибута min-width: 0. Если минимальная ширина не задана, по умолчанию будет установлено значение auto, которое здесь равно адаптивной ширине.

Выровняйте центр по вертикали и горизонтали

 .box {
            width: 100%;
            height: 300px;
            border: 1px solid purple;
            display: flex;
            justify-content: center;
            align-items: center;
        }
<div class="box"><p>居中</p></div>

7. Схема литья под адаптацию мобильного терминала

px+ различные методы компоновки это main/vx, а vx+ media query дополняется схемой (если вам не нужно пропорциональное масштабирование, то можно и не использовать)
Установите ширину = ширину области просмотра устройства в голове
использовать px в css
Используйте гибкий макет в соответствующих сценариях или адаптируйте его с помощью vw
Используйте медиа-запросы для разных типов устройств (ПК телефон планшет)

Количество слов недостаточно, в следующей главе будут обобщены некоторые проблемы, часто возникающие при адаптации веб-мобильного терминала. Например, проблема с линией 1px, как настроить адаптацию браузера WeChat для Safari для адаптации к Обработка проблемы с горизонтальным экраном iphonex ~ задержка события клика, проникновение и т. д.

1. Родственные понятия

1 пиксель

1. Пиксели

2. Разрешение

3.PPI

4. Физические пиксели устройства (физическое разрешение)

5. Независимые от устройства провалы пикселей (логическое разрешение)

6. Соотношение пикселей устройства dpr

7. css-пиксели

2 окна просмотра

1. Окно просмотра макетаlayout viewport

2. Визуальное окно просмотраvisual viewport

3. Идеальное окно просмотраideal viewport

4. Как получить идеальное окно просмотра на мобильном телефоне

5. Общий размер окна сбора данных

2. Распространенные схемы компоновки

макет на стороне ПК

1. Медиа-запросы

Размер разрешения основной системы

общий стиль

Мобильный прежде всего:

ПК сначала:

Медиа-запрос плюс рем-макет

2. Процентная раскладка

Приложение для макета в процентах

3.rem макет

4. Единица области просмотра vw

1. Используйте только vw в качестве единицы CSS

5. С фольксвагеном и рем

6. Отзывчивое изображение

1. Используйте максимальную ширину (адаптивное изображение):

2. Используйте исходный набор

3. Используйте фоновое изображение

4. Используйте тег изображения

7. Некоторые частные случаи

свойство масштабирования

Плагин для одноэкранного приложения ScaleEle

8. Литье под ПК

Решение для адаптации мобильного терминала

1. Медиа-запросы

2.схема видового экрана

3.рем адаптация

1. гибкое адаптационное решение (команда Alibaba)

2. Медиа-запрос + rem (внешняя команда NetEase)

4. vw / vh макет

5.vw+rem компоновка

метод 1

Способ 2

6. гибкий гибкий макет

свойства гибкого контейнера

1. свойство flex-direction

2. свойство flex-wrap

3. свойство гибкого потока

4. свойство justify-content (это очень важно и часто используется)

5. атрибут align-items (это тоже очень важно. Также часто используется)

6. свойство align-content

свойства проекта

1. заказать недвижимость

2. свойство flex-grow (очень важно)

3. свойство flex-shrink

4. свойство flex-basis (это ключевой момент, часто используемый)

5. свойство flex (это самое важное)

6. свойство align-self

6.1 Практическое применение Flex

Обычно используемый гибкий 1

6.2 гибкий общий макет

flex реализует макет с равным делением

Левый фиксированный, правый адаптивный

Выровняйте центр по вертикали и горизонтали

7. Схема литья под адаптацию мобильного терминала

3.`PPI`