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

Стиль в Vant по умолчанию использует `px` в качестве единицы измерения. Если вам нужно использовать единицу `rem`, рекомендуются следующие два инструмента:

- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) — плагин postcss для преобразования единиц измерения в метры.

- [lib-flexible](https://github.com/amfe/lib-flexible) используется для установки контрольного значения rem

Затем мы настраиваем эти два инструмента в проекте, чтобы завершить адаптацию REM.

1. Используйте [lib-flexible]( https://github.com/amfe/lib-flexible ) для динамической установки эталонного значения REM (размер шрифта тега html)**

1. Установка

npm i amfe-flexible

2. Затем загрузите и выполните модуль в `main.js`

import 'amfe-flexible'

Финальный тест: переключайтесь между различными размерами мобильных телефонов в браузере и наблюдайте за изменениями html-тега `font-size`.

Например, для устройств iPhone 6/7/8 (375x667) размер шрифта html-тегов составляет 37,5 пикселей.

lib-flexible: Делим ширину экрана устройства на 10 равных частей, тогда ширина одной части составляет 1/10 ширины устройства

2. Используйте postcss-pxtorem для pxпреобразования вrem

1. Установка

npm install postcss-pxtorem -D

Дополнение к знаниям:

npm install -d — это npm install --save-dev

npm insatll -s — это npm install --save

Когда мы используем npm install для установки модулей или подключаемых модулей, есть две команды, которые могут записывать зависимости в файл package.json, а именно:

npm install --save-dev имя_отправки

или

npm install --save depName

Следует отметить, что китайское значение слова Dependencies означает зависимость и привязанность, а dev — это сокращение от develop (развитие).

Таким образом, разница между ними отражена в файле package.json, плагины, установленные с помощью --save-dev, записываются в блок devDependencies, а плагины, установленные с помощью --save, записываются в блок зависимостей.

В чем разница между devDependencies и объектами зависимостей в файле package.json?

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

Например, если мы напишем проект, который зависит от jQuery, без этой зависимости будет выдаваться ошибка при запуске проекта, то в это время в зависимости должна быть прописана зависимость jQuery, а при установке jQuery npm следует использовать install -save jquery.

В нашем ежедневном процессе разработки некоторые используемые инструменты построения, такие как glup и webpack, являются просто зависимостями, используемыми в процессе разработки.Они не нужны, когда проект работает в сети, поэтому их можно написать во время установки.Введите devDependencies, команду используемый во время установки должен быть npm install -save-dev webpack для установки.

2. Затем создайте файл корневом каталоге проекта..postcssrc.js

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

`rootValue`Как это должно быть установлено?

Если вы используете схему адаптации REM на основе lib-flexable, она должна быть установлена на одну десятую вашего проекта.
Например, если ширина чертежа составляет 750, следует установить значение 75. Но вант билд стоит 37.5, почему? Так как вант пишется на основе 375
       , его нужно установить на 37,5.Единственный недостаток в том, что размер нашего эскиза должен быть 75.
       Есть ли лучшее решение:
          если это стиль ванта, его следует преобразовать в соответствии с 37.5
          Если это наш стиль преобразуется в соответствии с 75. Запросив
       документ, мы обнаружили, что rootValue поддерживает два типа:
          число, фиксированное значение: rootValue: 37.5,
          функция: может динамически обрабатываться и возвращает rootValue(){}
          когда postcss-pxtorem обрабатывает каждый файл css, эта функция будет вызвана
          и передаст информацию, относящуюся к обработанному файлу css (например, путь к файлу (атрибут файла) -- строка), функции через параметры

module.exports = {
	plugins: {
		//配置使用autoprefixer插件
		//作用：生成浏览器css样式规则前缀---生成在多版本浏览器都可兼容的css
		//vuecli内部已经配置了autoprefixer插件
		//所以又配置了一次，所以产生冲突了
	//   'autoprefixer': {
	// 	browsers: ['Android >= 4.0', 'iOS >= 8']
	//   },

	//配置使用postcss-pxtorem插件
	//作用：把px转化为rem
	  'postcss-pxtorem': {
		rootValue({file}){
			return file.indexOf('vant')==-1?75:37.5
		},
		//配置要转化的css的属性
		//*表示所有
		propList: ['*'],
		//配置不要转换的样式资源
		//exclude:'github-markdown'
		//排除不想生成rem的文件名，不要加后缀（.css）
	  }
}
}

3. После завершения настройки перезапустите службу

Финальный тест: обновите страницу браузера , проверьте стиль элемента, чтобы убедиться, что он был pxпреобразован в rem.

Дополнительные сведения о файлах `.postcssrc.js`конфигурации :

.postcssrc.jsэто файл конфигурации для PostCSS.

(1) Введение в PostCSS

PostCSS – это инструмент для обработки CSS. Его функции относительно просты. Он в основном отвечает за разбор кодов CSS и передачу их в плагины для обработки. Его система плагинов очень мощная и может выполнять различные операции, такой как:

Подключаемый модуль Autoprefixer может автоматически добавлять префиксы объявлений, связанные с браузером.
Плагин PostCSS Preset Env позволяет использовать новые функции синтаксиса CSS и обеспечивать обратную совместимость.
postcss-pxtorem может конвертировать px в rem
...

На данный момент PostCSS уже имеет более 200 плагинов с различными функциями . Разработчики также могут разрабатывать свои собственные плагины PostCSS в соответствии с потребностями проекта.

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

Vue CLI по умолчанию интегрирует PostCSS , а плагин autoprefixer включен по умолчанию .

Vue CLI использует PostCSS внутри.

Вы .postcssrcможете настроить PostCSS через или любой из источников конфигурации, поддерживаемых postcss-load-config . Его vue.config.jsтакже css.loaderOptions.postcssнастроить через postcss-loader в .

У нас автопрефикс включен по умолчанию . Если вы хотите настроить целевые браузеры, package.jsonиспользуйте поле browserslist файла .

(2) Конфигурация плагина Autoprefixer

autoprefixer — это подключаемый модуль PostCss, который автоматически добавляет префиксы браузера browsersдля настройки информации о версии совместимого браузера, но его запись здесь вызовет предупреждения компилятора.

Замените параметр Autoprefixer browsers на Browserslist config.
Используйте ключ browserslist в файле package.json или .browserslistrc.

Использование опции браузера может привести к ошибкам. Конфигурация списка браузеров
может использоваться для Babel, Autoprefixer, postcss-normalize и других инструментов.

Если вам действительно нужно использовать параметр, переименуйте его в overrideBrowserslist.

Узнайте больше на:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

Предупреждение означает, что вы должны записать browsersпараметры в файлыpackage.json или ..browserlistrc

[Андроид]
>= 4,0

[iOS]
>= 8

Пожалуйста , обратитесь сюда за конкретным синтаксисом .

(3) Конфигурация плагина postcss-pxtorem

rootValue: указывает размер шрифта корневого элемента, который будет выполнять преобразование единиц измерения в соответствии с размером корневого элемента.
propListИспользуется для установки атрибутов, которые можно преобразовать из px в rem.
- *Например , преобразуются все атрибуты widthи только widthатрибуты