vue和vue-cli構建使用 px2rem-loader ,全局自動轉換px單位,完美解決引入第三方樣式變小的問題

最近公司的的項目趕，做爲前端的小白懶出新的高度，使出專業的技能 --複製粘貼！！（改別人的代碼也是煎熬）
我常常作一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用常常用到的適配方案：
這裏就不細說了 有大神總結 ，或者自行百度。

瞭解真實的『REM』手機屏幕適配

前端：『REM』手機屏幕高清適配方案

hotcss.js移動端適配方案

這個文章也不錯

都是大神們智慧的結晶。。。。。。仰望！！！！！

好了廢話少說進入正題。
使用vue的小夥伴兒會用到淘寶的開源的適配方案flexible.js + rem + px2rem-loader 去輕鬆的完成適配，這也是我最喜歡的，可是使用這個方案時，你引入第三方庫時 樣式會變小。。？！！！

這個坑難的我不行，各類百度，各類想法，差一點就放棄了這個方案。

---

問題

變小的主要緣由是第三庫 css一依據 data-dpr="1" 時寫的尺寸

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

這時咱們使用的flexible引入時 data-dpr不是一個寫死了的，是一個動態的；就致使這個問題

解決
咱們能夠把第三方庫的css代碼px統一擴大2倍，聽起來很蠢對吧，我一開始也是折磨想的，有的小夥伴就該說這個的改多少，代碼少就無所謂，但是代碼不就的累死了。。。
我使用的地vscode這個編輯器有個擴展程序小叫 px-to-rem 這個可算是救世主了 他能夠讓你在2分鐘改完全部的代碼

第一步 下載 改默認配置

"px-to-rem.px-per-rem": 0.5, // 第一步  主要是讓1rem 等於0.5px

全選你要改的代碼 option+Z 快捷鍵。（windows我不知道）你會發現全部的px變rem

第二步 改默認配置

"px-to-rem.px-per-rem": 1,  //第二步

而後在全選你要改的代碼 option+Z 快捷鍵。（windows我不知道）你會發現全部的rem變px 這個px的值比是原來的2倍

OKok OK