Vue專案自動轉換 px 為 rem
阿新 • • 發佈:2018-12-23
前端開發中還原設計圖的重要性毋庸置疑,目前來說應用最多的應該也還是使用rem。然而很多人依然還是處於刀耕火種的時代,要麼自己去計算rem
值,要麼依靠編輯器安裝外掛轉換。
而本文的目標就是通過一系列的配置後,在開發中可以直接使用設計圖的尺寸開發,專案為我們自動編譯,轉換成rem
。
技術棧
- 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;
}
---End---