了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配
本人java菜鸟一名，若有错误，还请见谅。
1、px和em和rem的定义和区别
px：px像素，是相对单位，相对于屏幕的分辨率而言，也就是说，当屏幕的分辨率不同那么px相同，实际看到的大小也会不同。
例如：当一台手机的分辨率为1024*768来说，也就是说，这屏幕由纵向的1024个像素点和横向的768个像素点组成，所以当一个组件的width为200px的时候在这台手机上会占据200个横向的像素点；那么当同样大小的手机只有800*600的分辨率，那么该组件在同样的大小手机中也占据了200个横向像素点，所以看到的组件大小实际上会比分辨率大的要大。
em：是相对长度单位，是相对于当前对象内文本的尺寸，但要注意，em会继承父级元素的字体大小。
例如：任意浏览器的默认字体高度都是16px，所以未经调整的浏览器都符合16px = 1em。那么假设当根元素的大小为1.2em，子元素也要为1.2em，那么子元素大小应该设为1em，因为em会继承父元素的字体大小，若子元素也设计为1.2em那么实际大小会变为1.44em。
注意：当浏览器的默认字体高度改变时，em和px的转换比例也随之改变，比如当font-size = 65%的时候，那么实际的转化率为：16px * 65% = 10px = 1em。
rem：rem是css3新增的一个相对单位，所有的组件相对于的是html根元素的大小，那么可以做到的是，只修改根元素的大小就可以修改所有元素的大小。
例如：当根元素的大小为16px的时候，16px = 1rem ，若有组件大小为2.5rem，则其实际的大小为 2.5 * 16 = 40px。若根元素的字体大小改变，所有组件的大小也随之改变。
2、使用Flexible实现vue移动端的适配
lib-Flexible是一个制作h5的开源库，通过添加这个js文件之后动态的改变mate标签，从而给html标签添加data-dpr和font-size两种属性并动态改写他们的值。而当给font-size添加值之后会以这个值做相应的计算，从而达到屏幕适配的效果。
导入lib-Flexible：
在index.html中添加相应的路径 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html © w3cplus.com
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html © w3cplus.com
在main.js中添加相应的引用 import 'lib-flexible/flexible.js';
3、使用px2rem 插件方便的将px单位转为rem
引入Flexible之后可以使用rem来编写代码，但是对于已经使用了px来编写的程序来说又该怎么办呢。这里我们引入px2rem插件，来自动转换px单位。
具体步骤：
1、下载插件 npm install px2rem-loader lib-flexible --save
2、在main.js中引入lib-flexible import 'lib-flexible/flexible.js'
3、在build下的 utils.js中，找到generateLoaders 方法，添加以下代码
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75,
}
}
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
使用方法，通过改变remUnit的值来自动按比例转化为rem。
参考文章： https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
https://www.cnblogs.com/leejersey/p/3662612.html
https://blog.csdn.net/qq_33485463/article/details/80454326
