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

一、rem介绍

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

px与rem的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。（用上肯定是更好的）

二、适配解决思路

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

三、实现步骤

1. 安装 postcss-px2rem-exclude

cnpm install postcss-px2rem-exclude --save

2. 安装amfe-flexible

cnpm install amfe-flexible --save

3. 在Vue项目中的main.js导入amfe-flexible

// 引入amfe-flexible做rem适配
import 'amfe-flexible';

4. 配置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。

为什么要忽略node_modules目录下的文件
有时候我们在手机端项目的时候需要导入第三方UI库，例如：vant，这时你就会发现第三方的组件样式都变小了，变小的主要原因是第三库 css一依据 data-dpr=“1” 时写死的尺寸，我们使用的flexible引入时 data-dpr不是一个写死了的，是一个动态的，就导致这个问题。
 

四、配置meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 改为下面的mata标签，替换或者重复写都可以 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

 
 
参考博客：https://blog.csdn.net/u012878818/article/details/88190907
文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！
对博客文章的参考，若原文章博主介意，请联系删除！请原谅