瞭解css中px、em、rem的區別並使用Flexible實現vue移動端的適配

　　本人java菜鳥一名，如有錯誤，還請見諒。

　　一、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。若根元素的字體大小改變，全部組件的大小也隨之改變。

　　二、使用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>

<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

<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

 　　　　在main.js中添加相應的引用     import 'lib-flexible/flexible.js';

　　三、使用px2rem 插件方便的將px單位轉爲rem

　　引入Flexible以後可使用rem來編寫代碼，可是對於已經使用了px來編寫的程序來講又該怎麼辦呢。這裏咱們引入px2rem插件，來自動轉換px單位。

　　　　具體步驟：

　　　　　　一、下載插件   npm install px2rem-loader lib-flexible --save

　　　　　　二、在main.js中引入lib-flexible  import 'lib-flexible/flexible.js'

　　　　　　三、在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