VantUI移动端Rem适配

VantUI 移动端 Rem 适配

Vant UI 组件库的样式默认使用的单位是 px，若需要使用 rem，则需要使用插件进行进一步的处理

转换工具

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值

插件安装

使用 npm 或者 yarn 进行安装

yarn add postcss-pxtorem --save-dev
// or
npm install postcss-pxtorem --save-dev

yarn add lib-flexible --save
// or
npm install lib-flexible --save

PostCSS配置

const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");

module.exports = {
	publicPath: "/",
	outputDir: "dist",
	/* PostCSS 配置 */
	css: {
		loaderOptions: {
			postcss: {
				plugins: [
					autoprefixer({
						browsers: ["Android >= 4.0", "iOS >= 8"]
					}),
					pxtorem({
						rootValue: 37.5,
						propList: ["*"]
					})
				]
			}
		}
	},
	devServer: {
		open: true
		// proxy: ""
	},
	productionSourceMap: false
};

Rem基准值设置

• 在 入口文件 main.js 顶部添加  import "amfe-flexible"

CSS样式编写

根字体大小默认 37.5px，故 1rem = 37.5px。若移动端参照 2倍 750 宽度设计图，则编写的样式可以采用 rem 相对单位按照 1rem = 37.5px 宽度进行换算，也可以使用 px像素 / 2 作为设计图元素的宽度。亦或者将2倍图调整为 1倍 375 宽度设计图，按照 1：1 的比例进行样式的调整。