本人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