移动端开发适配之postcss-pxtorem

技术栈

• 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