前端開發(fā)中還原設(shè)計(jì)圖的重要性毋庸置疑效扫，目前來說應(yīng)用最多的應(yīng)該也還是使用rem倔监。然而很多人依然還是處于刀耕火種的時(shí)代，要么自己去計(jì)算rem值菌仁，要么依靠編輯器安裝插件轉(zhuǎn)換浩习。
而本文的目標(biāo)就是通過一系列的配置后，在開發(fā)中可以直接使用設(shè)計(jì)圖的尺寸開發(fā)济丘，項(xiàng)目為我們自動編譯谱秽，轉(zhuǎn)換成rem。
技術(shù)棧
vue-cli：使用腳手架工具創(chuàng)建項(xiàng)目闪盔。
postcss-pxtorem：轉(zhuǎn)換px為rem的插件弯院。
自動設(shè)置根節(jié)點(diǎn)html的font-size
因?yàn)閞em單位是相對于根節(jié)點(diǎn)的字體大小的辱士，所以通過設(shè)置根節(jié)點(diǎn)的字體大小可以動態(tài)的改變r(jià)em的大小泪掀。
原理網(wǎng)上有很多文章分享，這里不具體解釋颂碘。
1异赫、創(chuàng)建rem.js文件
很多人寫這種小工具文件會習(xí)慣性的加上閉包，這個(gè)其實(shí)是沒有必要的头岔。ES6中每個(gè)文件都是單獨(dú)的一個(gè)模塊塔拳。
// 基準(zhǔn)大小const baseSize = 32// 設(shè)置 rem 函數(shù)functionsetRem() {? // 當(dāng)前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改峡竣。? const scale = document.documentElement.clientWidth / 750? // 設(shè)置頁面根節(jié)點(diǎn)字體大小? document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) +'px'}// 初始化setRem()// 改變窗口大小時(shí)重新設(shè)置 remwindow.onresize =function() {setRem()}復(fù)制代碼
2靠抑、在main.js中引入rem.js
import'./utils/rem'復(fù)制代碼
引入文件后，查看頁面的html節(jié)點(diǎn)适掰，是否有被自動添加?font-size颂碧。
注意：完成到這一步荠列，也就是實(shí)現(xiàn)了rem布局，實(shí)際開發(fā)的時(shí)候载城，還是需要我們?nèi)ビ?jì)算對應(yīng)的rem值去開發(fā)肌似。
下一步我們就配置一下webpack，自動轉(zhuǎn)換px為對應(yīng)的rem值诉瓦。
配置?postcss-pxtorem?自動轉(zhuǎn)換px為rem
1川队、安裝?postcss-pxtorem
$ npm install postcss-pxtorem -D復(fù)制代碼
2、修改根目錄?.postcssrc.js?文件
找到?plugins?屬性新增pxtorem的設(shè)置
"postcss-pxtorem": {"rootValue": 32,"propList": ["*"],? // 注意：如果有使用第三方UI如VUX睬澡，則需要配置下忽略選擇器不轉(zhuǎn)換固额。? // 規(guī)則是class中包含的字符串，如vux中所有的class前綴都是weui-煞聪。也可以是正則对雪。"selectorBlackList": ["weui-"]}復(fù)制代碼
按照上述配置項(xiàng)目后，即可在開發(fā)中直接使用?px?單位開發(fā)米绕。
例如設(shè)計(jì)給出的設(shè)計(jì)圖是?750 * 1136瑟捣，那么可以直接在頁面中寫
body {width: 750px;height: 1136px;}復(fù)制代碼
將被轉(zhuǎn)換為
body {widht: 23.4375rem;height: 35.5rem;}復(fù)制代碼
注意：此方法支持import?和?.vue單文件中style。暫不支持style中使用@import url();
---End---
