vue.js移動端配置flexible.js

適用於最新版vue-cli,配置手淘的lib-flexible.js和rem實現移動端頁面自適應

#1.安裝lib-flexible.js

npm install lib-flexible --save
複製代碼

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

import 'lib-flexible'
複製代碼

#3.px轉換rem

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

npm install px2rem-loader --save-dev
複製代碼

#4.配置px2rem-loader

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

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

這裏最重要的就是要在上圖兩個位置都要加上px2remLoader，否則不會起做用！！！

#5.px2rem 用法

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

• 直接寫px，編譯後會直接轉化成rem —- 除開下面兩種狀況，其餘長度用這個
• 在px後面添加/no/，不會轉化px，會原樣輸出。 — 通常border需用這個
• 在px後面添加/px/,會根據dpr的不一樣，生成三套代碼。—- 通常字體需用這個

示例代碼 編譯前（本身寫的代碼）

.example{
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}
複製代碼

編譯後（打包後的代碼）

.example{
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}
複製代碼

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