技術棧（vue2.x）

vue-cli：使用腳手架工具建立專案。

postcss-pxtorem：轉換px為rem的外掛。

自動設定根節點html的font-size

因為rem單位是相對於根節點的字型大小的，所以通過設定根節點的字型大小可以動態的改變rem的大小。

1、建立rem.js檔案

很多人寫這種小工具檔案會習慣性的加上閉包，這個其實是沒有必要的。ES6中每個檔案都是單獨的一個模組。

// 基準大小
const baseSize = 32
// 設定 rem 函式
function setRem () {
 // 當前頁面寬度相對於 750 寬的縮放比例，可根據自己需要修改。
 const scale = document.documentElement.clientWidth / 750
 //
 
 設定頁面根節點字型大小
 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變視窗大小時重新設定 rem
window.onresize = function () {
 setRem()
}

2、在main.js中引入rem.js

import './utils/rem'

引入檔案後，檢視頁面的html節點，是否有被自動新增 font-size。

注意：完成到這一步，也就是實現了rem佈局，實際開發的時候，還是需要我們去計算對應的rem值去開發。

下一步我們就配置一下webpack，自動轉換px為對應的rem值。

配置 postcss-pxtorem 自動轉換px為rem

1、安裝 postcss-pxtorem

$ npm install postcss-pxtorem -D

2、修改 /build/utils.js 檔案

找到 postcssLoader 的程式碼塊

const postcssLoader = {
 loader: 'postcss-loader',
 options: {
  sourceMap: options.sourceMap
 }
}

修改為：

const postcssLoader = {
  loader: 
 
'postcss-loader',
  options: {
   sourceMap: options.sourceMap,
   plugins: [
    require('postcss-pxtorem')({
     'rootValue': 32,
     propList: ['*']
    })
   ]
 }
}

按照上述配置專案後，即可在開發中直接使用 px 單位開發。

例如設計給出的設計圖是 750 * 1136，那麼可以直接在頁面中寫

body {
 width: 750px;
 height: 1136px;
}

將被轉換為

body {
 widht: 23.4375rem;
 height: 35.5rem;
}

如果要讓部分屬性不轉換成 rem，可以將 px 寫成 Px：

div{
  width: 375Px;
  height: 812px;
}

這時頁面就會保留375px

body {
 widht: 375px;
 height: 35.5rem;
}