技术栈
- vue-cli：使用脚手架工具创建项目。
- postcss-pxtorem：转换px为rem的插件。
- vant：移动端ui组件。
postcss-pxtorem
是将px转化为rem的一个插件，rem单位是根据根节点字体大小，设置根节点大小，动态改变rem大小，从而实现适配不同大小的终端设备。
自动设置根节点html的font-size
因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。
js设置html的font-size
//document.compatMode用来判断当前浏览器采用的渲染方式。
// BackCompat：标准兼容模式关闭。
// CSS1Compat：标准兼容模式开启。（文档指定了 DOCTYPE）
// 当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
// 当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
//页面尺寸发生变化时重设根节点字体大小
window.addEventListener('resize', (e) => {
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
});
如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算
配置 postcss-pxtorem 自动转换px为rem
1、安装 postcss-pxtorem
$ npm install postcss-pxtorem -D
2、修改根目录 .postcssrc.js 文件
在vue.config.js中找到 plugins 属性新增pxtorem的设置
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"],
// 注意：如果有使用第三方UI如VUX，则需要配置下忽略选择器不转换。
// 规则是class中包含的字符串，如vux中所有的class前缀都是weui-。也可以是正则。
"selectorBlackList": ["weui-"]
}
vant
由于我们选用的ui组件是vant，在vant官网的进阶用法中，我们看到关于rem布局适配的相关内容：
image.png
蓝湖
此外在设置设计稿时，应该选择自定义的宽度设置为375px
image.png
