Vue中rem與postcss-pxtorem的應(yīng)用詳解
rem 布局
rem是根元素(html)中的font-size值。
rem布局不多贅述，有很多詳細(xì)說明rem布局原理的資料。
簡(jiǎn)單的說，通過JS獲取設(shè)備寬度動(dòng)態(tài)設(shè)定rem值，以實(shí)現(xiàn)在不同寬度的頁(yè)面中使用rem作為單位的元素自適應(yīng)的效果。
新建rem.js文件，于main.js中引用
// 設(shè)計(jì)稿以1920px為寬度，而我把頁(yè)面寬度設(shè)計(jì)為10rem的情況下
const baseSize = 192; // 這個(gè)是設(shè)計(jì)稿中1rem的大小。
function setRem() {
// 實(shí)際設(shè)備頁(yè)面寬度和設(shè)計(jì)稿的比值
const scale = document.documentElement.clientWidth / 1920;
// 計(jì)算實(shí)際的rem值并賦予給html的font-size
document.documentElement.style.fontSize = (baseSize * scale) + 'px';
}
setRem();
window.addEventListener('resize', () => {
setRem();
});
postcss-pxtorem
postcss-pxtorem是PostCSS的插件，用于將像素單元生成rem單位。
安裝
新建Vue項(xiàng)目
安裝 postcss-pxtorem
npm install postcss-pxtorem --save-dev
配置
可以通過3個(gè)地方來添加配置,配置文件皆位于vue 項(xiàng)目根目錄中，若文件不存在可以自行建立。
其中最重要的是這個(gè):
rootValue (Number)
- 根元素的值，即1rem的值
- 用于設(shè)計(jì)稿元素尺寸/rootValue
- 比如 rootValue = 192 時(shí)，在css中width: 960px; 最終會(huì)換算成width: 5rem;
還有一些其他的配置：
propList (Array) 需要做單位轉(zhuǎn)化的屬性.
- 必須精確匹配
- 用 * 來選擇所有屬性. Example: ['*']
- 在句首和句尾使用 * (['*position*'] 會(huì)匹配 background-position-y)
- 使用 ! 來配置不匹配的屬性. Example: ['*', '!letter-spacing']
- 組合使用. Example: ['*', '!font*']
minPixelValue(Number) 可以被替換的最小像素.
unitPrecision(Number) rem單位的小數(shù)位數(shù)上限.
完整的可以看官方文檔
權(quán)重
vue.config.js > .postcssrx.js > postcss.config.js
其中 postcssrc.js 和 postcss.config.js 可以熱更新， vue.config.js 中做的修改要重啟devServer
配置示例
vue.config.js
module.exports = {
//...其他配置
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 192,
minPixelValue: 2,
propList: ['*'],
})
]
}
}
},
}
.postcssrx.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16,
minPixelValue: 2,
propList: ['*'],
}
}
}
postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 192,
minPixelValue: 2,
propList: ['*'],
}
}
}
Reference
官方Github倉(cāng)庫(kù)：postcss-pxtorem
vue3.0中使用postcss-pxtorem
關(guān)于vue利用postcss-pxtorem進(jìn)行移動(dòng)端適配的問題
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue源碼學(xué)習(xí)之Object.defineProperty 對(duì)數(shù)組監(jiān)聽
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty 對(duì)數(shù)組監(jiān)聽，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了解決v-model雙向綁定失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue使用$emit傳遞參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue中textarea自適應(yīng)高度方案的實(shí)現(xiàn)
本文主要介紹了Vue中textarea自適應(yīng)高度方案的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了Vue切換Tab動(dòng)態(tài)渲染組件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vuex的幾個(gè)屬性及其使用傳參,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
本文是小編精心給大家收藏整理的關(guān)于Vue2.2.0+新特性,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題
這篇文章主要介紹了Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題,主要針對(duì)是登錄操作，我們?yōu)榱送瓿蒘SO(Single Sign On)的效果，認(rèn)證和授權(quán)在UC完成，用戶發(fā)起資源請(qǐng)求，服務(wù)網(wǎng)關(guān)會(huì)進(jìn)行過濾，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了Vue3必學(xué)技巧-自定義Hooks-讓寫Vue3更暢快示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue子頁(yè)面控制父頁(yè)面刷新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05