vue使用lib-flexible和postcss-px2rem-exclude解决移动端适配问题

vue使用lib-flexible和postcss-px2rem-exclude解决移动端适配问题

一、思路

解决移动端适配问题的根本思路在于将px转换成rem
⑴ 使用postcss-px2rem-exclude可以将项目中的px自动转换成rem
⑵ 而amfe-flexible则可以根据不同型号的手机，进行相应的HTML根节点(font-szie)的初始化。

二、步骤

1. 安装 postcss-px2rem-exclude、amfe-flexible
   cnpm install postcss-px2rem-exclude amfe-flexible --save

2. 在Vue项目中的main.js导入amfe-flexible
   import ‘lib-flexible’

3. 配置postcss-px2rem- excluded
   在根目录下创建 .postcssrc.js文件，并配置如下：

module.exports = {
    
    
    plugins: {
    
    
        autoprefixer: {
    
    },
        'postcss-px2rem-exclude': {
    
    
            remUnit: 75,//1rem = 75px(iphone6的设计稿如此设置)
            exclude: /node_modules/i //忽略node_modules目录下的文件
        }
    }
}

remUnit的值怎么设置:
amfe-flexible是按照屏幕宽度的十分之一来设置font-size的，所以我们remUnit的大小设置也应该是设计稿宽度的十分之一,这样css样式才会和设计稿一样.
lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。所以我们remUnit的大小设置也应该是设计稿宽度的十分之一，这样css样式才会和设计稿一样。

假如设计稿的宽度是750px，此时1rem应该等于75px。(如果remUnit设置为75，但设置稿是375px的，我们在css设置尺寸是需要将设计稿尺寸乘以2才匹配)
假如设计稿的宽度是375px，此时1rem应该等于37.5px。