如何在Vue項(xiàng)目將 px 轉(zhuǎn)換為 rem

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

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

Vue具體輕量級(jí)框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(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單位是相對于根節(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)前頁面寬度相對于 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è)置 rem
window.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ì)算對應(yīng)的rem值去開發(fā)。

下一步我們就配置一下webpack，自動(dòng)轉(zhuǎn)換px為對應(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;
}

以上就是小編為大家?guī)淼娜绾卧赩ue項(xiàng)目將 px 轉(zhuǎn)換為 rem的全部內(nèi)容了，希望大家多多支持億速云！