前端開發中還原設計圖的重要性毋庸置疑，目前來說應用最多的應該也還是使用rem。然而很多人依然還是處於刀耕火種的時代，要麼自己去計算rem值，要麼依靠編輯器安裝外掛轉換。

而本文的目標就是通過一系列的配置後，在開發中可以直接使用設計圖的尺寸開發，專案為我們自動編譯，轉換成rem。

技術棧

• vue-cli：使用腳手架工具建立專案。
• postcss-pxtorem：轉換px為rem的外掛。

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

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

原理網上有很多文章分享，這裡不具體解釋。

1、建立rem.js檔案

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

1. // 基準大小

2. const baseSize = 32

3. // 設定 rem 函式

4. function setRem () {

5. // 當前頁面寬度相對於 750 寬的縮放比例，可根據自己需要修改。

6. const scale = document.documentElement.clientWidth / 750

7. // 設定頁面根節點字型大小

8. document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'

9. }

10. // 初始化

11. setRem()

12. // 改變視窗大小時重新設定 rem

13. window.onresize = function () {

14. setRem()

15. }

16.  

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、修改根目錄 .postcssrc.js 檔案

找到 plugins 屬性新增pxtorem的設定

1. "postcss-pxtorem": {

2. "rootValue": 32,

3. "propList": ["*"]

4. }

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

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

1. body {

2. width: 750px;

3. height: 1136px;

4. }

將被轉換為

1. body {

2. widht: 23.4375rem;

3. height: 35.5rem;

4. }

注意：此方法支援import 和 .vue單檔案中style。暫不支援style中使用@import url();

---End---

轉載於：https://blog.csdn.net/sinat_17775997/article/details/79230616