來自：https://www.cnblogs.com/wangqiao170/p/8652505.html 侵 刪 每一個認真生活的人，都值得被認真對待 來自：https://www.cnblogs.com/wangqiao170/p/8652505.html 侵 刪 每一個認真生活的人，都值得被認 ...
來自：https://www.cnblogs.com/wangqiao170/p/8652505.html 侵 刪 每一個認真生活的人，都值得被認真對待
vue px轉換為rem
前端開發中還原設計圖的重要性毋庸置疑，目前來說應用最多的應該也還是使用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、修改根目錄 .postcssrc.js 文件
找到 plugins 屬性新增pxtorem的設置
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}
按照上述配置項目後，即可在開發中直接使用 px 單位開發。
例如設計給出的設計圖是 750 * 1136，那麼可以直接在頁面中寫
body {
width: 750px;
height: 1136px;
}
將被轉換為
body {
widht: 23.4375rem;
height: 35.5rem;
}
註意：此方法支持import 和 .vue單文件中style。暫不支持style中使用@import url();
