移动端适配方案 amfe-flexible & postcss-pxtorem

1. 介绍

amfe-flexible 是配置可伸缩布局方案，主要是将 1rem 设为 viewWidth/10（设计图宽度）

postcss-pxtorem是postcss的插件，将像素单元生成rem单位

2. 安装

npm install amfe-flexible --save
npm install postcss-pxtorem --save

3. 项目中配置

（1）amfe-flexible的配置

main.js中引入

import 'amfe-flexible'

index.html中引入

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport" />

（2）postcss-pxtorem的配置

在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可，例在postcss.config.js中

module.exports = {
    plugins: {
      "postcss-pxtorem": {
        // 设计稿 375:37.5
        // 设计稿：750:75
        // Vant 是基于 375
        rootValue: 75,  // ps设计图纸宽度为750px时 就写上面的比例75  设计稿宽度的1/10
        // rootValue根据设计稿宽度除以10进行设置
        propList: ["*"], //需要转换的属性
        selectorBlackList: ['van'] // 过滤掉VantUI组件
        /*
          这个*作用是width,height,margin宽高这些属性的适配,单位转换为rem
          都移动端项目了,那肯定全部都要转换
        */
      }
    }
}

在vue.config.js中，

module.exports = {
    //...其他配置
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 75,
                        propList: ['*']
                    })
                ]
            }
        }
    },
}

4. 项目中使用，直接使用px即可

.banner {
		width: 100%;
		height: 240px;
		border-radius: 10px;

		img {
			width: 100%;
			height: 100%;
		}
	}