配置 flexible

安裝 lib-flexible

在命令列中執行如下安裝：

npm i lib-flexible --save

引入 lib-flexible

在專案入口檔案 main.js 裡 引入 lib-flexible

// main.js
import 'lib-flexible'

 meta 標籤處理

在專案根目錄的 index.html 中根據需求刪除如下 meta，採用flexible自動設定。flexible只針對iphone做了dpr判斷，android的dpr全部是1。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
 

px 轉 rem

實際開發中，我們通過設計稿得到的值單位是 px，所以要將 px 轉換成 rem 再寫進樣式中。
將 px 轉換成 rem 我們將使用 px2rem 這個工具，它有 webpack 的 loader：px2rem-loader

安裝 px2rem-loader

在命令列中執行如下安裝：

配置

npm install px2rem-loader --save-dev

px2rem-loader

在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他樣式檔案 loader 最終是都是由 build/utils.js 裡的一個方法生成的。需在 cssLoader 後再加上一個 px2remLoader 即可，px2rem-loader 的 remUnit 選項意思是 1rem=多少畫素，假定設計稿750px，結合 lib-flexible 的方案，我們將 px2remLoader 的 options.remUnit 設定成設計稿寬度的 1/10，也就是75，baseDpr預設是2，這樣會導致字型不正常，比如設定12px，在pdr為2的時候應該是24px才正常顯示，但是預設Dpr如果為2，則轉化後的字型顯示為12px，就會比預想的小

// utils.js

var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
    }
}

var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75,//設計稿除以10得到的值
baseDpr:1,//預設dpr是2，設定成1，才能保證字型正常
    }
}

// ...

並放進 loaders 陣列中

// utils.js

function generateLoaders(loader, loaderOptions) {

const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

// ...
 

修改配置後需要重啟，然後我們在元件中寫單位直接寫 px，設計稿量多少就可以寫多少了

px2rem-loader的使用

直接寫px，編譯後會直接轉化成rem ---- 除開下面兩種情況，其他長度用這個
在px後面新增/*no*/，不會轉化px，會原樣輸出。 --- 一般border需用這個
在px後面新增/*px*/,會根據dpr的不同，生成三套程式碼。---- 一般字型需用這個，dpr為1時chorme顯示最小字型為12px，

示例程式碼
編譯前（自己寫的程式碼）

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}
編譯後（打包後的程式碼）

.selector {
    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;
}

更多文章：移動端適配方案一

                  移動端適配方案二