vue实现移动端适配方案 （amfe-flexible和postcss-pxtorem结合）建议收藏

1.amfe-flexible

amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

2.postcss-pxtorem

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

3.移动端适配方案

vue实现移动端适配步骤如下:

• 先安装amfe-flexible和postcss-pxtorem

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

• 在main.js导入amfe-flexible

  import 'amfe-flexible';
  

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

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

    在.postcssrc.js或postcss.config.js中配置如下：

    		module.exports = {
    		    "plugins": {
    		        'postcss-pxtorem': {
    		            rootValue: 37.5,
    		            propList: ['*']
    		        }
    		    }
    		}
    

• rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValue设为37.5；
• propList是设置需要转换的属性，这边*为所有都进行转换。

4.测试结果

css中设置某类宽度为375px：

	.content{
	  width:375px;
	}

运行后在浏览器可以发现已经转化为10rem,即375/设置的rootValue：

以上情况则说明postcss-pxtorem配置成功。

html的字体大小跟随设备宽度进行改变，body跟随设备的dpr进行改变，这是amfe-flexible的实现，即说明配置成功。