Vue項目自動轉換 px 為 rem的實現(xiàn)方法
前端開發(fā)中還原設計圖的重要性毋庸置疑，目前來說應用最多的應該也還是使用rem。然而很多人依然還是處于刀耕火種的時代，要么自己去計算rem值，要么依靠編輯器安裝插件轉換。
而本文的目標就是通過一系列的配置后，在開發(fā)中可以直接使用設計圖的尺寸開發(fā)，項目為我們自動編譯，轉換成rem。
技術棧
vue-cli：使用腳手架工具創(chuàng)建項目。
postcss-pxtorem：轉換px為rem的插件。
自動設置根節(jié)點html的font-size
因為rem單位是相對于根節(jié)點的字體大小的，所以通過設置根節(jié)點的字體大小可以動態(tài)的改變rem的大小。
原理網(wǎng)上有很多文章分享，這里不具體解釋。
1、創(chuàng)建rem.js文件
很多人寫這種小工具文件會習慣性的加上閉包，這個其實是沒有必要的。ES6中每個文件都是單獨的一個模塊。
// 基準大小
const baseSize = 32
// 設置 rem 函數(shù)
function setRem () {
// 當前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 設置頁面根節(jié)點字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
setRem()
}
2、在main.js中引入rem.js
import './utils/rem'
引入文件后，查看頁面的html節(jié)點，是否有被自動添加 font-size。
注意：完成到這一步，也就是實現(xiàn)了rem布局，實際開發(fā)的時候，還是需要我們?nèi)ビ嬎銓膔em值去開發(fā)。
下一步我們就配置一下webpack，自動轉換px為對應的rem值。
配置 postcss-pxtorem 自動轉換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: ['*']
})
]
}
}
按照上述配置項目后，即可在開發(fā)中直接使用 px 單位開發(fā)。
例如設計給出的設計圖是 750 * 1136，那么可以直接在頁面中寫
body {
width: 750px;
height: 1136px;
}
將被轉換為
body {
widht: 23.4375rem;
height: 35.5rem;
}
總結
以上所述是小編給大家介紹的Vue項目自動轉換 px 為 rem的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了詳解Vue2.5+遷移至Typescript指南，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
Vue是一種流行的Web開發(fā)框架,它提供了一個雙向綁定的語法糖。在Vue中,我們可以很容易地獲取頁面上的數(shù)據(jù),并且可以實時的響應其變化,這篇文章主要給大家介紹了關于Vue獲取input值的四種常用方法,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了Vue.js中使用道具方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了Vue中component標簽解決項目組件化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue計算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案
今天小編就為大家分享一篇vue計算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vite配置優(yōu)雅的code?spliiting代碼分割詳解
這篇文章主要為大家介紹了Vite配置優(yōu)雅的code?spliiting代碼分割詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了vue組件暴露和.js文件暴露接口操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了bpmn-js在vue中的基本使用及操作功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了Vue如何引入icon圖標,本文通過圖文并茂的形式給大家介紹的非常詳細，需要的朋友可以參考下2018-03-03
這篇文章主要為大家介紹了el-upload大文件切片上傳實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03