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 的比例进行样式的调整。