像素关键概念
设备像素：设备的物理像素，其尺寸大小是绝对的
逻辑像素：css 的像素单位，其尺寸是相对的，也称作独立像素（css：1px在不同分辨率的显示下表现是有差异的）
分辨率：屏幕长边的设备像素 x 屏幕短边的设备像素（其实这就是通常意义上的设备像素）
缩放因子：逻辑像素相对于设备像素的放大比例。可通过window.devicePixelRatio获取。
这里有一个关系式：
逻辑像素 = 设备像素 x 缩放因子
css单位：px、em、rem
px
相对长度单位。像素 px 是相对于显示器屏幕。一般用px设置宽高或者字体大小是比较精确的，但是px不能根据浏览器缩放的变化而变化的。
em 与 rem
em与rem都是css中的相对单位，rem是css3中的属性。MDN关于em的定义如下：
em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小
em比起px会使页面更灵活，但是实际使用中效果并不理想。em做弹性布局一旦某个节点的字体发生变化，那么其后代元素都要重新计算。
所以需要引入rem，MDN关于rem的定义
作用于非根元素时，相对根元素字体大小；rem作用于根元素字体大小时，相对于其初始字体大小
Rem布局原理
rem布局的本质是等比缩放，通常是基于宽度。怎么理解呢？根据上面rem的两个特性
html { font-size: 20px }
p { width: 1rem }
如果要把p元素宽度换算为px，那么应该 20 * 1 = 20px；如果html的font-size设置为40px，那么1rem宽度p元素的px值为：40 * 1 = 40
那么问题来了。如果我们想p元素的宽度可以自适应不同宽度的显示的话，我们只需要在不同宽度的显示中动态设置根元素html的font-size值。
可以计算一下。当我们的页面是按照100px宽度屏幕的显示来制作的话，其中需要放置一个10px宽的p元素。那么这个p元素占了总宽度的10%。
为了方便计算，这里设置html元素字体大小为显示宽度的1/100，即1px，那么要使得p元素的宽度为10px，所以p元素的rem值为10
{
html { font-size: 1px } // 总宽度100px的1/100
p { width: 10rem } // 1 * 10 = 10px, 占总宽度100px的10%
}
现在这个页面在宽度为200px的屏幕上访问，动态设置html字体元素值为200px的1/100，则为2px，那么p元素的px宽度为：2 * 10 = 20px。
{
html { font-size: 2px }
p { width: 10rem } // 2 * 10 = 20px，占总宽度200px的10%
}
Vue中的屏幕适配方案：postcss-plugin-px2rem + lib-flexible
这里环境是vue2.x 版本、vue-cli4.x，css预编译使用sass。
首先安装两个包
npm install postcss-plugin-px2rem lib-flexible --save
postcss-plugin-px2rem是webpack中自动转换px到rem的插件
lib-flexible 是淘宝开源的移动端自适应插件。
flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值 ===>设备缩放比
配置postcss-plugin-px2rem
打开项目中的vue.config.js，添加以下配置：
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 192, // 换算基数,默认为100
exclude: /(node_module)/, // 默认false, 可以用正则表达式排除某些文件的转换
mediaQuery: false, // 允许在媒体查询中转换px
})
]
}
}
}
}
其中rootValue的计算逻辑是这样的，如果是按照640分辨率来开发页面，那么rootValue的值为640 / 10 = 64，如果是按照1920来开发，那么rootValue为：1920 / 10 = 192。这里除以10是因为lib-flexible设定比例 1em = 10px
修改lib-flexible源码，以增加对大屏的适配
打开node_module中lib-flexible文件的flexible.js。其中定义了一个名为refreshRem的方法
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
可以看到这个方法中有一个width / dpr > 540的判断。大概也能猜出来这个540是一个极限值。那么，如果要设置1920分辨率的屏幕只需要把这个540修改了即可，修改后的方法：
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
// 当屏幕超过1920px以后就不在随着屏幕的变大而变大了
if (width / dpr > 1920) {
width = 1920 * dpr;
}
// 当屏幕小于1300px以后就不再随着屏幕的变小而变小了
if (width / dpr < 1300) {
width = 1300 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
当然我这里不考虑移动端，所以加上了一个1300的最小极限