Адаптивная схема компоновки

CSS
Адаптивная схема компоновки

Адаптивная схема компоновки

Набор кодов соответствует эскизу проекта для обеспечения совместимости вверх/вниз схем адаптивной компоновки.

Это лишь самый поверхностный способ его использования. Нет, он не тестировался в нескольких средах (сложная компоновка и т. д.), содержимое только для справки.

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

Начало

что такое рем

rem(размер шрифта корневого элемента) относительно корневого элемента<html>Единица размера шрифта, используемая для вычислений.

например настройкиhtml { font-size: 75px }, другие элементы1rem = 75px,4rem = 300px

что такое вв

vwосновывается наviewportЕдиница длины окна.1vwравныйwindow.innerWidthиз1%

например, физическая ширина устройства375pxчас,1vw = 3.75px

что такое дпр

соотношение пикселей устройстваdevice pixel ratioкороткое имяdpr, что представляет собой отношение физических пикселей к аппаратно-независимым пикселям.

существуетweb, браузер предоставляет намwindow.devicePixelRatioчтобы помочь нам получитьdpr.

iPhone 6、7、8Фактические физические пиксели750 x 1334, в инструментах разработчика мы видим: его независимый от устройства пиксель375 x 667, соотношение пикселей устройстваdprдля2

например, если элементу задана высота200px(здесьpxОтносится к физическим пикселям, а неCSSпикселей),iphone6соотношение пикселей устройстваdpr = 2, мы даемheightДолжно быть200px/2=100dp.

postcss-px-to-viewport (например, мобильная практика)

postcss-px-to-viewportПодход на самом деле не сильно отличается, он напрямую вычисляет, сколько занимает каждый пиксель в дизайн-проекте.%выводитьvw,rem

Проект дизайна = 375px

1. Преобразовать схему VW

'postcss-px-to-viewport': {
    unitToConvert: 'px', // 需要转换的单位，默认为"px"
    viewportWidth: 375, // 视窗的宽度，对应设计稿的宽度
    viewportUnit: 'vw', // 指定需要转
    fontViewportUnit: 'vw', // 字体使用的视口单位
    unitPrecision: 13 // 指定`px`转换为视窗单位值的小数后 x位数
   	...
}

Рассчитайте пропорцию 1px в проекте дизайна, а затем преобразуйте ее в vw

1px = 1 / 375 = 0.2666666666666%который100px = 26.6666666666666% = 26.6666666666666vw

При фактическом рендеринге (экран 375 пикселей)26.6666666666666vw = 26.6666666666% * 375 = 100px

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

@media screen and (min-width: 1024px) {
  html {
    max-width: 1024px;
  }
}

2. Преобразовать схему REM

Чтобы избежать проблемы несоответствия размеров, вызванной разными размерами шрифта по умолчанию в разных браузерах, нам нужно это исправить.root元素 htmlизfont-size

Так уж получилось, что мы можем использоватьpostcss-px-viewportПереходы встроенного стиля не поддерживаются. устанавливатьroot元素 htmlв линиюfont-size: 16px;чинитьrootразмер шрифта, чтобы вписаться вremстроить планы.

1px = 1 / 375 = 0.2666666666666%который100px = 26.6666666666666% = 26.6666666666666rem

Так как мы установилиroot元素 htmlв линиюfont-size: 16px;чинитьrootразмер шрифта. Таким образом, при фактическом рендеринге (экран 375 пикселей) контейнер26.6666666666666rem = 26.6666666666666 * 16 = 426.6666666666656px

То есть нам нужно изменитьviewportWidthРазмер и дизайн подходящие. Прямое происхождение дизайна и внешнего видаviewportWidthМножественное отношение =426.6666666666656 / 100 = 4.26656раз. настраиватьviewportWidth: 1599.96 （375 * 4.26656 = 1599.96）

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

@media screen and (min-width: 1024px) {
  html {
    max-width: 1024px;
  }
}

rem + vw (мобильная практика NetEase)

В принципе, также требуется справочный проектный чертеж, который предполагается375pxШирокий дизайнерский рисунок. метод расчета иpostcss-px-to-viewport remРешения один к.

Формула расчета:1vw = 3.75px 1px = 0.2666666666666667vw 100px = 26.6666666666666667vw

1rem = 26.6666666666666667vw = 100px

Однако следует учитывать, что при установке1remустановлен в100px 对应的 vw值Значение (не допускать меньше минимального шрифта браузера) в соответствии с дизайном при написанииpx / 100написать.

при необходимости向上兼容Когда адаптивно, установите@mediaсоответствующие разнымfont-sizeВот и все.

Также установите медиа-запрос, который будет исправлен после превышения диапазона ширины.bodyШирина с центрированием содержимого.

html {
  font-size: 26.6666666666666667vw;
  margin: 0 auto;
  body {
    // 重置字体大小
    font-size: 0.14rem;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 9vw;
    max-width: 768px;
  }
}

ren+vw方案

Гибкость (практика предварительной чистки рук)

js получитьclientWidth, разделенный на десять частей. установить сноваrem. размер шрифта12 * dpr

Цитируя Учителя Да Мо:

из-заviewportУстройство совместимо со многими браузерами,lib-flexibleОт этого плана перехода уже можно отказаться, будь то текущая версия или предыдущая версия, есть определенные проблемы. Рекомендую всем начать использоватьviewportЧтобы заменить это решение.vwСовместимые решения можно найти в разделе "Как использовать vw в проекте Vue для мобильной адаптации" статья.

Принцип теперь легко понять. В соответствии с DPR экрана устройства автоматически устанавливается наиболее подходящее масштабирование HD (размер шрифта тела, сбрасывается размер шрифта корневого каталога).width= ширина в независимых от устройства пикселях, начальное/максимальное/минимальное масштабирование = 1. Рассчитано с помощью jsroot fontSizeзначение так, чтобы1rem= Дизайн тяги / 10.

Поскольку сказано, что от него можно отказаться, он отображаться не будет.

Адрес источника:GitHub.com/Ah Trouble/Церковное право…

Суммировать

FlexibleСегодня можно сдаться и перейти на CSS, чтобы освободить использованиеJSДинамическая модификацияfontsizeпотребляемая производительность

только мобильный

postcss-px-to-viewport -- vwметод

Шаттл, не о чем думать. И наиболее реалистично увеличивать и уменьшать масштаб пропорционально размеру экрана.

Дизайн маленького экрана совместим с адаптивным большим экраном.

Когда необходимо адаптировать дизайн мобильного терминала к平板,PC屏幕

(Наиболее удобный)postcss-px-to-viewport -- rem

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

  1. Автоматически преобразовывать единицы измерения в фреймы пользовательского интерфейса.
  2. Сотрудничатьmedia媒体查询настраиватьroot fontSizeАдаптироваться к размеру различных разрешений и限制最大宽度.

недостаток

  1. Все единицы, для которых установлено преобразование, будут преобразованы, а единицы, для которых нельзя установить определенные стили, не будут преобразованы.

(наиболее гибкий)rem + vw

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

  1. Сотрудничатьmedia媒体查询настраиватьroot fontSizeАдаптироваться к размеру различных разрешений и限制最大宽度。
  2. Широкие возможности настройки, кому нужно конвертировать, кто конвертируетrem.

недостаток

  1. Когда вам нужно преобразовать единицы в рамках пользовательского интерфейса, они будут очень большими. Нужно закрывать по одному.

(Неподходящий)postcss-px-to-viewport -- vw

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

Дизайн большого экрана обратно совместим с адаптивным малым экраном.

(предложение)postcss-px-to-viewport -- rem

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

  1. Автоматическое преобразование единиц в рамках пользовательского интерфейса, избавьте от проблем.
  2. Установите минимальную ширину по центру за пределами полосы прокрутки.
  3. При адаптации к экрану больше, чем эскиз проектаroot fontSizeУстановите его, чтобы он был больше.

недостаток

  1. Все единицы, для которых установлено преобразование, будут преобразованы, а единицы, для которых нельзя установить определенные стили, не будут преобразованы.

(общий) рем + vw

Предположим, что экран 1024px

Формула расчета:1vw = 10.24px 1px = 0.09765625vw 100px = 9.765625vw

1rem = 9.765625vw = 100px

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

  1. При настройке необходимо1remустановлен в100px 对应的 vw值Значение (не допускать меньше минимального шрифта браузера) в соответствии с дизайном при написанииpx / 100написать.

недостаток

  1. Необходимо написать несколько изменений медиа-запросаroot fontSize(Из-за слишком большого размера шрифта содержимое одного экрана отображается слишком мало).
  2. Когда вам нужно преобразовать единицы в рамках пользовательского интерфейса, они будут очень большими. Нужно закрывать по одному.
  3. Невозможно установить минимальную ширину для содержимого по центру.

(Неподходящий)postcss-px-to-viewport -- vw

Из-за отечественного браузераroot fontSizeКогда он меньше минимального шрифта по умолчанию (обычно 12 пикселей), он будет вынужден оставатьсяroot fontSize = 12px, так что этот метод не подходит.

адрес демонстрационного склада

Ссылка на блог: github gitee

Категории