基於vue-cli配置移動端rem自適應專案

依賴

專案基礎配置使用 vue-cli 生成

移動端自適應方案核心：阿里可伸縮佈局方案 - lib-flexible

px 轉 rem：px2rem，它有 webpack 的 loader：px2rem-loader

使用

首先，我們使用 vue 的腳手架 vue-cli 來初始化一個 webpack 專案

沒有安裝過 vue-cli 的請先安裝 vue-cli

1. 安裝所需依賴後安裝 lib-flexible 和 px2rem-loader

npm i lib-flexible -S

npm i px2rem-loader -D

2. 找到 build/utils.js

在 cssLoader 後再加上一個 px2remLoader 即可，px2rem-loader 的 remUnit 選項意思是 1rem=多少畫素，結合 lib-flexible 的方案，我們將 px2remLoader 的 options.remUnit 設定成設計稿寬度的 1/10，這裡我們假設設計稿寬為 750px

// utils.js
const cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75      //設計稿寬度/10
  }
}
// ...

並放進 loaders 陣列中

// utils.js
function generateLoaders(loader, loaderOptions) {
    const loaders = [cssLoader, px2remLoader]
    // ...

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

// main.js

import 'lib-flexible'

修改配置後 npm run dev，然後我們就可以在.vue 裡直接用px，這樣寫起來就舒服多了。

關於字型大小

不推薦用rem作為單位, lib-flexible會在html（也就是document.documentElement）上增加一個data-dpr屬性，所以對於字型的設定，仍舊使用px作為單位，並配合用data-dpr屬性來區分不同dpr下的的大小。

例如：

div {
  width: 1rem; 
  height: 0.4rem;
  font-size: 12px; // 預設寫上dpr為1的fontSize
}

[data-dpr="2"] div {
  font-size: 24px;
}

[data-dpr="3"] div {
  font-size: 36px;
}

至此，我們就建立了一個移動端自適應的專案。