vue.js移動端配置flexible.js

前言

最近在用vue作移動端項目，網上找了一些移動端適配的方案，我的以爲手淘團隊flexible.js仍是比較容易上手，在這裏作下總結。

主體

flexible.js適配方案採用rem佈局，根據屏幕分辨率大小不一樣，調整根元素html的font-size，從而達到每一個元素寬高自動變化，適配不一樣屏幕

1. 安裝lib-flexible.js

npm install lib-flexible --save

1. 在項目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible'

經過要以上兩步，就完成了在vue項目使用lib-flexible來解決移動端適配了。

lib-flexible會自動在html的head中添加一個meta name="viewport"的標籤，同時會自動設置html的font-size爲屏幕寬度除以10，也就是1rem等於html根節點的font-size。假如設計稿的寬度是750px，此時1rem應該等於75px。假如量的某個元素的寬度是150px，那麼在css裏面定義這個元素的寬度就是 width: 2rem

這裏須要注意幾點：

1. 檢查一下html文件的head中，若是有 meta name="viewport"標籤，須要將他註釋掉，由於若是有這個標籤的話，lib-flexible就會默認使用這個標籤。而咱們要使用lib-flexible本身生成的 meta name="viewport"來達到高清適配的效果。

2. 由於html的font-size是根據屏幕寬度除以10計算出來的，因此咱們須要設置頁面的最大寬度是10rem。

3. 若是每次從設計稿量出來的尺寸都手動去計算一下rem，就會致使咱們效率比較慢，還有可能會計算錯誤，因此咱們可使用px2rem-loader自動將css中的px轉成rem

使用 webpack 的 px2rem-loader,自動將px轉換爲rem

1. 安裝px2rem-loader

npm install px2rem-loader --save-dev

1. 配置px2rem-loader

首先找到 build/utils.js文件，在utils.js中添加以下配置

找到generateLoaders方法，在函數裏以下配置

1. px2rem 用法

安裝px2rem後，再使用px上有些不一樣，你們能夠參考px2rem官方介紹，下面簡單介紹一下。

• 直接寫px，編譯後會直接轉化成rem —- 除開下面兩種狀況，其餘長度用這個

• 在px後面添加/*no*/，不會轉化px，會原樣輸出。 —- 通常border需用這個

• 在px後面添加/*px*/,會根據dpr的不一樣，生成三套代碼。—- 通常字體需用這個

下面是本人寫的實例代碼，能夠參考

原始代碼：

.box{
    width: 150px;
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

編譯後生成代碼：

.box{
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    font-size: 14px;
}
[data-dpr="2"] .selector {
    font-size: 28px;
}
[data-dpr="3"] .selector {
    font-size: 42px;
}

這樣基本配置就完成了，重啓項目就可使用lib-flexible+rem編寫移動端頁面了

後綴

交個朋友，能夠一塊兒進階前端學習

找到我： GitHub

若是你以爲本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！