阅读 630

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

安装依赖

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

使用 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,并且切换不同设备时都会自动帮我们设置根字体大小,需要注意的是行内样式是不会被转换的

image.png

image.png

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: ['*'],
    },
  },
};
复制代码

亲测好用

文章分类
前端
文章标签