vue.js移動端配置flexible.js

Mr_code發表於2018-02-01
Vue.jsFlex

適用於最新版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中新增如下配置

vue.js移動端配置flexible.js
找到generateLoaders方法，在函式裡如下配置

vue.js移動端配置flexible.js
這裡最重要的就是要在上圖兩個位置都要加上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編寫移動端頁面了

相關文章