我的博客
开发记录
前端笔记
前端文档
我的博客
开发记录
前端笔记
前端文档

Vant UI 移动端 Rem 适配

预计阅读时间: 2 分钟

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

转换工具

插件安装

PostCSS 配置

postCss 配置
1const autoprefixer = require("autoprefixer");
2const pxtorem = require("postcss-pxtorem");
3
4module.exports = {
5	publicPath: "/",
6	outputDir: "dist",
7	/* PostCSS 配置 */
8	css: {
9		loaderOptions: {
10			postcss: {
11				plugins: [
12					autoprefixer({
13						browsers: ["Android >= 4.0", "iOS >= 8"]
14					}),
15					pxtorem({
16						rootValue: 37.5,
17						propList: ["*"]
18					})
19				]
20			}
21		}
22	},
23	devServer: {
24		open: true
25		// proxy: ""
26	},
27	productionSourceMap: false
28};

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