vue-vant使用postcss-pxtorem和amfe-flexible做移动端适配

vue-vant使用postcss-pxtorem和amfe-flexible做移动端适配

• 文章目录

• 前言

  一、amfe-flexible、postcss-pxtorem是什么？

  二、使用步骤

  1.安装amfe-flexible

  2.配置：main.js

  3.安装postcss-pxtorem

   4.在项目根目录下新增配置文件postcss.config.js

   5.兼容vant，设置postcss.config.js

  说在最后

---

前言

手机端开发，市场上手机尺寸各种各样，加上还有paid，所以手机端的适配很重要，就这几天我自己遇到的适配问题，解决方案：postcss-pxtorem和amfe-flexible配合使用，我先发一个纪录分享。

这次是h5页面开发，使用的是vue+vant构建项目，"vue": "^2.6.14","@vue/cli-plugin-babel": "~5.0.0","vant": "^2.12.51","amfe-flexible": "^2.2.1","postcss-pxtorem": "^6.0.0",

---

一、amfe-flexible、postcss-pxtorem是什么？

amfe-flexible：

        可以自动给 < html > 设置font-size值为设备宽度的1/10

postcss-pxtorem：

        rem方案虽然可以解决适配问题，但是如果UI设计稿使用的是px单位，自己转换成rem比较麻烦所以需要使用postcss-pxtorem，可以把px转换为rem

二、使用步骤

1.安装amfe-flexible

npm i amfe-flexible

2.配置：main.js

import 'amfe-flexible'

3.安装postcss-pxtorem

npm i postcss-pxtorem

 4.在项目根目录下新增配置文件postcss.config.js

module.exports = {
     plugins: {
         'postcss-pxtorem': {
             rootValue() {
                 return 75;
             },
             propList: ['*'],
         },
     },
 };

 5.兼容vant，设置postcss.config.js

        如果使用了vant组件库，vant的设计稿是根据375px去设计的，为了避免冲突需要单独设置

module.exports = {
     plugins: {
         'postcss-pxtorem': {
             rootValue({ file }) {
                 return file.indexOf('vant') !== -1 ? 37.5 : 75;
             },
             propList: ['*'],
         },
     },
 };

---

说在最后

如有不对之处或更好方法，感谢各位慷慨支招！