Станьте более опытным в навыках CSS

rem + простая-гибкая схема адаптации

Простой разбор

remотносительно корневого элемента<html>изfont-sizeРазмер для расчета сиденья как единицы;

simple-flexibleПо мнению команды Шоу Таоlib-flexible.js, Сравните, переписанный плагин, совместимый с ОШИБКОЙ в вертикальном экране UC на горизонтальный экран, настройка ширины визуального проекта дизайна: designWidth, установка максимальной ширины: maxWidth

здесь естьsimple-flexibleизGithubадрес, загрузка и использование;

Первый параметр — это ширина эскиза визуального дизайна, как правило, эскиз визуального дизайна имеет ширину 750 пикселей, которую можно настроить в соответствии с реальной ситуацией.
Второй параметр устанавливает максимальную ширину производственного наброска, если она превышает 750 пикселей, максимальное ограничение составляет 750 пикселей;
Коэффициент конвертации при использовании 1:100, то есть 1rem = 100px;

Шаги для использования

копироватьsimple-flexibleизflexible.min.jsилиflexible.jsкод на страницу<head>из<script>внутри этикетки;
Затем размер эскиза визуального оформления, внутри отрегулируйте значения двух последних параметров;
В соответствии с пикселем дизайна используйтеremВ визуальном проекте проекта пересчета единиц измеренияpxЕдиница, например: 750px = 7.5rem;

плюсы и минусы

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

rem+lib-гибкая схема адаптации

Простой разбор

lib-flexible.jsЭто плагин Js, созданный командой Hand Taoist, который может быть динамически переписан через JS.<meta>Этикетка;

lib-flexible.jsОсновной принцип заключается в имитацииvwДелим визуальную осадку на 100 частей, в пересчете на единицу а, 1бэр = 10а;

Возьмите мокап 750px в качестве примера.

1a = 7.5px， 1rem = 75px

Шаги для использования

В соответствии с приведенными выше шагами внешний CDN также можно импортировать.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>

Можно также использовать модульный подход.

Npm:

npm i -S amfe-flexible

JS:

import 'amfe-flexible'

/*
do something
*/

плюсы и минусы

Я обнаружил в браузере UC, что горизонтальный пакет и вертикальный экран не могут быть преобразованы, и было найдено совместимое решение, которое через js на странице<head>генерируется в определении<html>элементfont-sizeизstyleэлементы для решения!

<style id="rootFontSize">html{font-size: 100px !important;}</style>

И официально заявлено, что этоvwЧрезмерная программа, не рекомендуется для длительного использования;

Схема адаптации PostCSS + VW

Простой разбор

PostCSSБудуCSSсталиJavaScriptданные, чтобы сделать его действенным;

VWединица длины, основанная на окне Viewpost;

ViewpostОтносится к области визуализации браузера, а область визуализацииwindow.innerWidth/window.innerHeightразмер;

а такжеViewpostСоответствующими единицами являются следующие четыре

vw: Это меньше ширины области просмотра 1VW = 1% от Window.innerwidth;
vh: сокращение высоты области просмотра 1vw = window.innerHeight 1%;
vmin: меньшее значение между vw и vh
vmax: большее значение между vw и vh

Шаги для использования

Предполагая, что ширина эскиза визуального дизайна составляет 750 пикселей, то есть 1vw = 7,5 пикселей, тогда единица измерения vw должна быть преобразована в соответствии со значением px чертежа дизайна.Чтобы избежать такого расчета, конечно, необходимо использоватьPostCSS,так же какpostcss-px-to-viewportОдинPostCSSплагин

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

parceljs
webpack

Если вы использовали детскую обувь с передними строительными лесами, вы должны были видеть, что они будут в корневом каталоге проекта..postcssrcфайл, который содержит некоторые известные параметры конфигурацииautoprefixer,cssnano,px2rem,cssnext...и так далее забавные плагины для настройки, но я не буду приводить здесь эти инструкции, просто представлюpostcss-px-to-viewportИспользовать с ВВ

нпм:

npm i -S postcss-px-to-viewport

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

//...
"plugins": {
  "postcss-px-to-viewport": true
},
"rule": {
  "postcss-px-to-viewport": {
    "viewportWidth": 750,
    "viewportHeight": 1334,
    "unitPrecision": 5,
    "viewportUnit": "vw",
    "selectorBlackList": [],
    "minPixelValue": 1,
    "mediaQuery": false
  }
}
//...

После того, как конфигурация будет завершена, используйте px непосредственно в проекте, и он будет автоматически преобразован в единицу vw при сборке, что не слишком круто;

postcss-px-to-viewportОписание элемента конфигурации

"viewportWidth"        //设置视觉设计稿的宽度
"viewportHeight"       //设置视觉设计稿的高度
"unitPrecision":       //单位的精度，即保留多少位小数
"viewportUnit":        //转换的单位
"selectorBlackList":   //需要忽略的选择器
"minPixelValue":       //最小像素值
"mediaQuery":          //是否允许媒体查询转换为 px

плюсы и минусы

Совместимость vw кажется не очень хорошей, и, возможно, потребуется понизить версию.Необходимо использовать CSS Houdini и CSS Polyfill, чтобы выполнить некоторую обработку понижения для единиц vw;

Vw может превышать 100vw при смешивании с px поля.В настоящее время вместо поля используется отступ, и для его решения можно использовать размер окна.Вы также можете использовать функцию calc() CSS для выполнения расчета;

При конвертации все еще есть небольшая разница в пикселях, которую невозможно полностью восстановить;

Присоединение rem также не требует вычислительных средств

На возвышенном есть плагинcssremВы можете позволить почерку px, а затем sublime автоматически преобразовать в rem, вы можете влюбиться в css,

Инструкции по настройке следующие:

px_to_rem                   // px转rem的单位比例，默认为40，基本定义是视觉设计稿的宽度/10；
max_rem_fraction_length     // px转rem的小数部分的最大长度，默认为6；
available_file_types        // 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]；

Суммировать

Все три схемы адаптации, описанные здесь, используются.

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

благодарный@напрасноПомощь (анализ существительного) + поощрение (напоминание)

благодарный@w3cplus,блог разработки @frontend,

Спасибо вам двоим за четыре статьи, которые меня вдохновили

Поговорим об адаптации мобильных страниц
Использование Flexible для реализации терминальной адаптации страниц H5 Taobao
рем адаптивная верстка
рем адаптивный js

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

оригинальный блогИстория времениДобро пожаловать в игру~