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 的比例進行樣式的調整。