本文章向大家介紹如何在Vue項(xiàng)目將 px 轉(zhuǎn)換為 rem的基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下。

成都創(chuàng)新互聯(lián)自成立以來(lái)，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)站制作、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個(gè)性化軟件開(kāi)發(fā)等基于互聯(lián)網(wǎng)的全面整合營(yíng)銷(xiāo)服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開(kāi)發(fā)管理經(jīng)驗(yàn)、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開(kāi)發(fā)工程師團(tuán)隊(duì)及專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)師團(tuán)隊(duì)。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

技術(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)的字體大小的，所以通過(guò)設(shè)置根節(jié)點(diǎn)的字體大小可以動(dòng)態(tài)的改變r(jià)em的大小。

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

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

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

// 基準(zhǔn)大小
const baseSize = 32
// 設(shè)置 rem 函數(shù)
function setRem () {
 // 當(dāng)前頁(yè)面寬度相對(duì)于 750 寬的縮放比例，可根據(jù)自己需要修改。
 const scale = document.documentElement.clientWidth / 750
 // 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大小
 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
 setRem()
}

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

import './utils/rem'

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

注意：完成到這一步，也就是實(shí)現(xiàn)了rem布局，實(shí)際開(kāi)發(fā)的時(shí)候，還是需要我們?nèi)ビ?jì)算對(duì)應(yīng)的rem值去開(kāi)發(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)目后，即可在開(kāi)發(fā)中直接使用 px 單位開(kāi)發(fā)。

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

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

將被轉(zhuǎn)換為

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

以上就是小編為大家?guī)?lái)的如何在Vue項(xiàng)目將 px 轉(zhuǎn)換為 rem的全部?jī)?nèi)容了，希望大家多多支持創(chuàng)新互聯(lián)！