移动端适配px自动转换成rem

安装依赖

最近写移动端的项目时遇到了适配的问题，除了手写rem外，使用第三方工具可以很好的解决，并且能大大提升开发效率，在此做个记录使用 rem 单位进行适配，推荐使用以下两个工具：

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
lib-flexible 用于设置 rem 基准值

npm install postcss postcss-pxtorem --save-dev

npm i -S amfe-flexible

进行配置

在根目录下新建postcss.config.js写入如下代码

module.exports = {
  plugins: {
     // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue: 75, // 根元素字体大小(1rem的值)，假设设计稿的尺寸为750
      propList: ['*'],
    },
  },
};

在入口文件引入amfe-flexible

测试

我们用vue-cli创建一个项目，取出不需要的文件，在App.vue写入以下代码

<template>
  <div id="app">
    <div class="box">rem移动端适配</div>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
.box {
  height: 75px;
  font-size: 20px;
  line-height: 75px;
  background: pink;
}
</style>

打开浏览器可以看到，我们系的px样式都被自动转换成了rem，并且切换不同设备时都会自动帮我们设置根字体大小，需要注意的是行内样式是不会被转换的

tips: 如果运行报错提示postCSS8啥的错误，则把postcss-pxtorem的版本降低到5.1.1就好了

适配vant第三方ui框架

module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        // vant是基于375px来写的
        return file.indexOf('vant') !== -1 ? 37.5 : 75 //（这里的75根据实际设计稿的尺寸填写）
      },
      propList: ['*'],
    },
  },
};

亲测好用