依賴

項(xiàng)目基礎(chǔ)配置使用 vue-cli 生成

移動(dòng)端自適應(yīng)方案核心：阿里可伸縮布局方案 - lib-flexible

px 轉(zhuǎn) rem：px2rem，它有 webpack 的 loader：px2rem-loader

使用

首先，我們使用 vue 的腳手架 vue-cli 來初始化一個(gè) webpack 項(xiàng)目

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

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

npm i lib-flexible -S

npm i px2rem-loader -D

2. 找到 build/utils.js

在 cssLoader 后再加上一個(gè) px2remLoader 即可，px2rem-loader 的 remUnit 選項(xiàng)意思是 1rem=多少像素，結(jié)合 lib-flexible 的方案，我們將 px2remLoader 的 options.remUnit 設(shè)置成設(shè)計(jì)稿寬度的 1/10，這里我們假設(shè)設(shè)計(jì)稿寬為 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      //設(shè)計(jì)稿寬度/10
  }
}
// ...

并放進(jìn) loaders 數(shù)組中

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

3. 在項(xiàng)目入口文件 main.js 里 引入 lib-flexible

// main.js

import 'lib-flexible'

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

關(guān)于字體大小

不推薦用rem作為單位, lib-flexible會(huì)在html（也就是document.documentElement）上增加一個(gè)data-dpr屬性，所以對于字體的設(shè)置，仍舊使用px作為單位，并配合用data-dpr屬性來區(qū)分不同dpr下的的大小。

例如：

div {
  width: 1rem; 
  height: 0.4rem;
  font-size: 12px; // 默認(rèn)寫上dpr為1的fontSize
}

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

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

至此，我們就創(chuàng)建了一個(gè)移動(dòng)端自適應(yīng)的項(xiàng)目。