Vue項(xiàng)目自動轉(zhuǎn)換 px 為 rem的實(shí)現(xiàn)方法
前端開發(fā)中還原設(shè)計(jì)圖的重要性毋庸置疑，目前來說應(yīng)用最多的應(yīng)該也還是使用rem。然而很多人依然還是處于刀耕火種的時代，要么自己去計(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)的改變rem的大小。
原理網(wǎng)上有很多文章分享，這里不具體解釋。
1、創(chuàng)建rem.js文件
很多人寫這種小工具文件會習(xí)慣性的加上閉包，這個其實(shí)是沒有必要的。ES6中每個文件都是單獨(dú)的一個模塊。
// 基準(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è)置 rem
window.onresize = function () {
setRem()
}
2、在main.js中引入rem.js
import './utils/rem'
引入文件后，查看頁面的html節(jié)點(diǎn)，是否有被自動添加 font-size。
注意：完成到這一步，也就是實(shí)現(xiàn)了rem布局，實(shí)際開發(fā)的時候，還是需要我們?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
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)目自動轉(zhuǎn)換 px 為 rem的實(shí)現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue.js中ref及$refs的使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
在vue項(xiàng)目中父子組件間的通訊很方便,但兄弟組件或多層嵌套組件間的通訊,就會比較麻煩,這時使用eventBus通訊,就可以很便捷的解決這個問題,這篇文章主要給大家介紹了關(guān)于Vue中事件總線(eventBus)使用的相關(guān)資料,需要的朋友可以參考下2022-03-03
基于uniapp+vue3自定義增強(qiáng)版table表格組件「兼容H5+小程序+App端」
uv3-table：一款基于uniapp+vue3跨端自定義手機(jī)端增強(qiáng)版表格組件,支持固定表頭/列、邊框、斑馬紋、單選/多選,自定義表頭/表體插槽、左右固定列陰影高亮顯示,支持編譯兼容H5+小程序端+App端,H5+小程序+App端,多端運(yùn)行一致2024-05-05
一般我們的前端Vue項(xiàng)目中都會涉及到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目部署跨域問題的詳細(xì)解決過程,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vue3+ElementPlus+VueCropper實(shí)現(xiàn)上傳圖片功能
文章介紹了如何在Vue3、ElementPlus和VueCropper組件中實(shí)現(xiàn)圖片上傳和裁剪功能,包括放大、縮小等操作,感興趣的朋友跟隨小編一起看看吧2025-01-01
在現(xiàn)代前端開發(fā)中,單頁應(yīng)用（SPA）已經(jīng)成為主流,而 Vue.js 作為一款流行的前端框架,其官方路由庫 Vue Router 則是構(gòu)建 SPA 的核心工具之一,在使用 Vue Router 的過程中,開發(fā)者可能會遇到一些常見的錯誤,本文將深入探討這一錯誤的原因、影響以及解決方案2025-01-01
Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式的相關(guān)資料,前段獲取生成的是base64圖片,需要轉(zhuǎn)化為jpg,png,需要的朋友可以參考下2023-09-09
vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了jenkins自動化部署vue，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Arco Design 作為一款專為 Vue3 打造的企業(yè)級 UI 組件庫,以其豐富的特性和卓越的性能,成為現(xiàn)代 Web 應(yīng)用開發(fā)者值得關(guān)注的選擇,這篇文章主要介紹了Vue3 框架Arco Design詳解,需要的朋友可以參考下2024-08-08