前端開發(fā)中還原設(shè)計(jì)圖的重要性毋庸置疑，目前來說應(yīng)用最多的應(yīng)該也還是使用rem。然而很多人依然還是處于刀耕火種的時(shí)代，要么自己去計(jì)算rem值，要么依靠編輯器安裝插件轉(zhuǎn)換。

而本文的目標(biāo)就是通過一系列的配置后，在開發(fā)中可以直接使用設(shè)計(jì)圖的尺寸開發(fā)，項(xiàng)目為我們自動(dòng)編譯，轉(zhuǎn)換成rem。

技術(shù)棧

vue-cli：使用腳手架工具創(chuàng)建項(xiàng)目。

postcss-pxtorem：轉(zhuǎn)換px為rem的插件。

自動(dòng)設(shè)置根節(jié)點(diǎn)html的font-size

因?yàn)閞em單位是相對(duì)于根節(jié)點(diǎn)的字體大小的，所以通過設(shè)置根節(jié)點(diǎn)的字體大小可以動(dòng)態(tài)的改變r(jià)em的大小。

原理網(wǎng)上有很多文章分享，這里不具體解釋。

1、創(chuàng)建rem.js文件

很多人寫這種小工具文件會(huì)習(xí)慣性的加上閉包，這個(gè)其實(shí)是沒有必要的。ES6中每個(gè)文件都是單獨(dú)的一個(gè)模塊。

// 基準(zhǔn)大小const baseSize = 32// 設(shè)置 rem 函數(shù)function setRem () { // 當(dāng)前頁面寬度相對(duì)于 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()}

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

import './utils/rem'

引入文件后，查看頁面的html節(jié)點(diǎn)，是否有被自動(dòng)添加 font-size。

注意：完成到這一步，也就是實(shí)現(xiàn)了rem布局，實(shí)際開發(fā)的時(shí)候，還是需要我們?nèi)ビ?jì)算對(duì)應(yīng)的rem值去開發(fā)。

下一步我們就配置一下webpack，自動(dòng)轉(zhuǎn)換px為對(duì)應(yīng)的rem值。

配置 postcss-pxtorem 自動(dòng)轉(zhuǎn)換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: ['*']    })   ] }}

按照上述配置項(xiàng)目后，即可在開發(fā)中直接使用 px 單位開發(fā)。

例如設(shè)計(jì)給出的設(shè)計(jì)圖是 750 * 1136，那么可以直接在頁面中寫

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

將被轉(zhuǎn)換為

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

總結(jié)

以上所述是小編給大家介紹的Vue項(xiàng)目自動(dòng)轉(zhuǎn)換 px 為 rem的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！