解決vue移動端適配問題

1，先看看網上關於移動端適配講解

再聊移動端頁面適配，rem和vw適配方案！

基礎點：rem相對根節點字體的大小。因此不用px; 根字體：字體的大小px; px：你就當成cm(釐米)這樣的東西吧； 基準：750設計稿；

這是方案的基礎理論，在這個基礎上，咱們還要搞明白，到底要幹一件什麼事情！

目標一 、手機適配：就是頁面上的尺寸，不管高度，仍是寬度，還有字體，隨屏幕的寬度變化！這裏是屏幕寬度！是否是想到了vw，對，就是這個意思；——最大程度在各個尺寸屏幕上還原設計稿

目標二、px轉換成rem：通常UI給的設計稿寬度大小是750，因此，咱們想直接寫上面UI標記的尺寸；——最大程度減小工做

爲何選擇rem? 好久以前沒有vw，怕vw的兼容問題，就用了rem；也就是：rem的兼容性>vw的兼容性； 還有一種就是本身寫百分比很不優雅

---

1、理論基礎！

實現目標一

用rem就能夠了吧！由於rem就能夠隨根字體大小改變而改變，從而實現了自適應的功能。 可是，可是，重點來，若是，根字體的大小默認是16px；那麼，咱們的1rem；就永遠是16px，懂麼？也就是若是設計稿是750（放大了一倍，iphone是375pt),咱們想要個50%的大小: 50%*357px/16=11.718rem 若是咱們寫一個11.718rem的寬度，然而這隻能在能iphone6還原設計稿，也就是隻有在iphone6上這樣的寬度才恰好佔一半； 那麼問題來了，若是在每一個屏幕上都是50%呢，直接改變根字體大小（16px)不就完了麼！！；11.718rem永遠仍是那個11.718rem，不用擔憂；

實現目標2、

用工具，webpack，postcss,postcss-pxtorem

2、準備主要工具！

viewport: 建議自行百度；

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
複製代碼

vue-cli: 用這個主要是用webpack,這個構建工具大大下降了webpack的使用難度;快速構建出一個前端項目。

postcss: 官網解釋：PostCSS is a tool for transforming styles with JS plugins，就是postcss用js插件幫你轉換css樣式的一個工具。好比，這裏的把你的文件裏面16px替換成1rem(根大小默認16px的狀況）；這樣你就不用本身去算了！

postcss-pxtorem: postcss的一個插件，主要是幫你把px轉換成對應的rem； 而後：還要用js代碼去動態算根目錄應該有的字體大小，反正就是一段js代碼去動態獲取屏幕寬度！

3、rem——開始幹！

第一步，先用vue-cli快速構建出一個項目，而後，安裝postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url；

第二步，在項目根目錄下添加.postcssrc.js文件，在裏面寫上

module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 32, propList: ['*'], minPixelValue: 2 } }};
複製代碼

rootValue，這裏就是根目錄的字體大小是32px，這裏爲啥設置成32呢，由於通常設計稿是750，比iphone6的大一倍，因此設置成16的兩倍，就是32px;proplist就是那些屬性須要轉換成rem，這裏是所有的意思； 好比你可選擇設置； propList: ['font', 'font-size', 'line-height', 'letter-spacing'] minPixelValue就是最小轉換單位，這是最小轉換單位是2px的意思；

第三步，動態設置根字體大小！一段簡單的js插入在head裏面；

(function() {
    function autoRootFontSize() {
        document.documentElement.style.fontSize =        Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';
          // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是本來是750大小的32px;若是屏幕大小變成了375px,那麼字體就是16px;也就是根字體fontSize大小和屏幕大小成正比變化！是否是很簡單
    }
    window.addEventListener('resize', autoRootFontSize);
    autoRootFontSize();
})();
複製代碼

這裏，我想說的是徹底能夠用vw去設置根字體大小，26px/375px=4.267vw;就不用js去算了！ html{font-size:4.267vw}; //由於這個字體大小徹底是隨屏幕正比變化；

4、vw——開始幹！ vw的方案就簡單多了，由於vw原本就相對屏幕的百分比，因此咱們不用再去動態的改變根字體大小了，只須要把750上的px大小轉換成對應的vw值就完了，這一步交給postcss工具就能夠！ 因此只須要兩步！ 第一步，先用vue-cli快速構建出一個項目，而後，安裝postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url

第二步，在項目根目錄下添加.postcssrc.js文件，在裏面寫上

module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { viewportWidth: 750, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }, "postcss-viewport-units": {}, }}
複製代碼

viewportWidth是你設計稿的大小750，而後unitPrecision是vw值保留的小數點個數；

5、總結！

首先明白一件事：px就像cm同樣，1px永遠是1px;1cm永遠是1cm； 那麼咱們從目標再反推一道邏輯： 咱們想要的結果很簡單: 一個元素的寬度（px) / 屏幕寬度(px) = 定值 （這個定值就是設計稿上面的值比例定值）；

——因此要作就是：屏幕變寬，要讓元素寬度就變寬。 然鵝，咱們寫的代碼裏面的px是不可能變的（取的750設計稿上面的尺寸）；那麼postcss編譯出來的rem值也是不變的；

咱們是怎麼把設計稿裏面的40px換算成相應rem的呢；你只要記住根字體大小的值（瀏覽器的默認是16px，如今設置成的32px)就是1rem；這交給工具同一去算； 獲得：元素的寬度(px) = 元素的寬度（rem) ✖️32; 因此這個32是你必需要設置在postcss-pxtorem裏面的；這樣它就能夠幫你算； 又由於： 元素的寬度(rem) ✖️ 根字體大小（px) = 元素的寬度（px) 元素的寬度（px) 變大， 元素的寬度(rem) 不變，那就只有改變根字體大小（px) ，變大；具體怎麼變，上面的js代碼已經解釋了；

——因此咱們作的就是：屏幕變寬，讓根字體大小（px) 變寬，元素寬度就變寬。 750屏幕下是寫的樣式大小是1:1, 因此 又由於咱們想要：根字體大小（px) / 屏幕寬度(px) = 32 / 750
因此： 根字體大小（px) = 32 / 750 ✖️ 屏幕寬度(px)

一個元素的寬度（px) / 屏幕寬度(px) = 定值 → 根字體大小（px) ✖️元素的寬度（rem）/ 屏幕寬度(px) → 32 / 750 ✖️ 屏幕寬度(px) ✖️元素的寬度（rem）/ 屏幕寬度(px) 等於什麼？？ 獲得的的是一個與屏幕大小無關的定值！

化簡： 元素的寬度（rem）✖️32 / 750 = 元素的寬度（px) / 750 ——不就是設計稿上面的比例麼！！！

---

驗證以上操做出來的結果是否符合預期也很簡單： 好比一個img的寬，高，在iphone6上的尺寸（審查元素的大小！px單位）： 根字體:16px; postcss算出來的rem值是2.5rem; 2.516=40px; 實際上也是40px; ——獲得元素實際大小 40✖️40（px), 屏寬是375；比例是40/375=0.10667; 在iphone5上的尺寸（審查元素的大小！px單位）： 根字體：13.6533px; postcss算出來的rem值是2.5rem; 2.513.6533=34.13px; 實際上也是34.13px; ——獲得元素實際大小 34.13✖️34.13（px), 屏寬是320；比例是34.13/320=0.10665;

---

2，本身項目適配配置(實踐)

上的文章講的理論和方法是可行的，本身項目的解決方案和他大同小異（主要用rem）： 1，插件：amfe-flexible + postcss-px2rem amfe-flexible：自動根據不一樣設備改變data-dpr的值，這樣就能夠根據不一樣的data-dpr設置字體大小不變，僅放大相應倍數。

postcss-px2rem：打包的時候把項目裏面的px統一轉換成rem，轉換的基準值根據配置設置的（.postcssrc.js） /由於我是以750px(iphone6)寬度爲基準，因此remUnit爲37.5/

---

通過試驗結果：

postcss-px2rem：只負責把項目裏面的px按照基準值轉換成rem，並不負責根節點動態font-size的計算。

例如，代碼裏面有個高度固定：180px， 基準值是：37.5， 那最後界面上的rem=180/37.5=4.8rem 無論換不一樣客戶端手機，不一樣分辨率，界面上都是固定4.8rem【rem的值是固定的，根據根節點的font-size不一樣，在界面顯示的px也不一樣】，界面上顯示的px = 16（沒有設置font-size的話默認是16px）* 4.8rem = 76.8px

【那麼這個基準值：37.5怎麼來的：

rem基準值計算 關於rem的基準值,也就是上面那個37.5px實際上是根據咱們所拿到的視覺稿來決定的,主要有如下幾點緣由: 1.因爲咱們所寫出的頁面是要在不一樣的屏幕大小設備上運行的,因此咱們在寫樣式的時候必需要先以一個肯定的屏幕來做爲參考,這個就由咱們拿到的視覺稿來定;假如咱們拿到的視覺稿是以iphone6的屏幕width=375px爲基準: ar docEl = document.documentElement; var width = docEl.getBoundingClientRect().width; var rem = width / 10; 這樣計算出來的rem基準值就是37.5(iphone6的視覺稿),這裏爲何要除以10呢,其實這個值是隨便定義的,由於不想讓html的font-size太大,固然也能夠選擇不除,只要在後面動態js計算時保證同樣的值就能夠

】

上面的組件只負責轉換rem，並無根據不一樣設備設置font-size，下面再加入這個組件amfe-flexible:

不一樣設備下的font-size不一樣。