vue中实现移动端rem完美适配vant

移动端项目主要是根据屏幕大小来动态设置元素的尺寸，需要在项目中安装两个模块：postcss-pxtorem和amfe-flexible。

vant组件官方说明：https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage

模块说明：

1、安装命令：

npm install postcss postcss-pxtorem --save-dev
npm i lib-flexible

2、设置postcss

修改根目录下的postcss.config.js 文件（如果没有这个文件，可以手动添加一份）

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
　　　　　// vant得设计稿是按照375设计的，而我们得设计稿是按照750来设计的，所以vant按37.5走，750的设计稿按75走，换算基准都是设计稿得十分之一，这是因为lib-flexible是将设计稿分为10分之一来做的适配
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

 

3、引入 lib-flexible（两种方式都行，二选一）

在main.js中引入 lib-flexible 即可

// main.js
import 'lib-flexible'

也可以在 public/index.html 文件的 <head> 标签中引入

// public下的index.html
<script src="./node_modules/lib-flexible/index.js"></script>

4、重启项目即可，页面布局时正常写 px 即可

 

posted @ 2020-12-30 17:22  认真，是一种态度  阅读(1381)  评论(0)  编辑  收藏  举报