vue?px轉(zhuǎn)rem配置詳解
方法一
一、配置與安裝步驟：
1、在 Vue 項(xiàng)目的 src 文件夾下創(chuàng)建一個(gè) config 文件夾：
2、在 config 文件夾中創(chuàng)建 rem.js：
3、將以下代碼復(fù)制到 rem.js 中：
// 基準(zhǔn)大小
const baseSize = 32
// 設(shè)置 rem 函數(shù)
function setRem () {
// 當(dāng)前頁面寬度相對(duì)于 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()
}
4、在 src 文件夾下的 main.js 中引入：
import './config/rem'
5、在 Vue 項(xiàng)目根目錄終端引入：
npm install postcss-pxtorem -D
6、在 Vue 項(xiàng)目文件夾下的 postcss.config.js 中加入：
module.exports = {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
"rootValue": 16,
"propList": ["*"]
}
}
}
方法二
第一步 安裝 lib-flexible
npm i lib-flexible --save
第二步 安裝 px2rem-loader
npm install px2rem-loader --save-dev
第三步 引入lib-flexible
import 'lib-flexible/flexible'
第四步 最重要的一步 配置utils文件
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}<br>//在generateLoaders方法中添加px2remLoader
1
const loaders = [cssLoader,px2remLoader]
或者第四步：Create new “vue.config.js” file if without “vue.config.js” (目錄: hello-world/vue.config.js)
module.exports = {
chainWebpack: (config) => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 75 // 75表示750的設(shè)計(jì)稿，37.5表示375的設(shè)計(jì)稿
})
}
}
1.按照px來編寫都會(huì)轉(zhuǎn)化成rem的形式，但是有些地方我們不想轉(zhuǎn)換，可以用下面兩種方法。
在px后面添加/no/，不會(huì)轉(zhuǎn)化px，會(huì)原樣輸出。 — 一般border需用這個(gè)
在px后面添加/px/,會(huì)根據(jù)dpr的不同，生成三套代碼。---- 一般字體需用這個(gè)
2 使用過程中，發(fā)現(xiàn)某些import外聯(lián)樣式不會(huì)被轉(zhuǎn)化，注意避開這些坑。
<style src='../assets/style.css'>
/* px2rem能正常轉(zhuǎn)換 */
</style>
<style>
/* px2rem不能正常轉(zhuǎn)換 */
@import '../assets/style.css';
</style>
<style>
/* px2rem不能正常轉(zhuǎn)換 */
@import url('../assets/style.css');
</style>
方法三
第一步 安裝 amfe-flexible
npm i amfe-flexible -S
第二步 安裝 postcss-pxtorem
npm install postcss-pxtorem --save-dev
第三步 引入amfe-flexible
import 'amfe-flexible'
第四步根目錄下創(chuàng)建postcss.config.js文件
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例
今天小編就為大家分享一篇vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了Vuex新手的理解與使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了vue2項(xiàng)目的打包優(yōu)化方法,包括減少打包代碼體積和提升編譯時(shí)間等,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(刷新保持狀態(tài))
倒計(jì)時(shí)的運(yùn)用場(chǎng)景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機(jī)驗(yàn)證碼或者是郵箱驗(yàn)證碼之類的，即使用戶跳轉(zhuǎn)到其它頁面或者刷新，再次回到登錄也，驗(yàn)證碼的倒計(jì)時(shí)也得保持狀態(tài),下面通過本文給大家分享Vue3?驗(yàn)證碼倒計(jì)時(shí)功能實(shí)現(xiàn)，感興趣的朋友一起看看吧2022-08-08
vue mounted()函數(shù)中無法定義初始化樣式的原因分析
這篇文章主要介紹了vue mounted()函數(shù)中無法定義初始化樣式的原因分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
關(guān)于echarts?清空上一次加載的數(shù)據(jù)問題
這篇文章主要介紹了關(guān)于echarts?清空上一次加載的數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue中的項(xiàng)目打包及部署全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue-resouce設(shè)置請(qǐng)求頭的三種方法
本篇文章主要介紹了vue-resouce設(shè)置請(qǐng)求頭的三種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Vue input輸入框回車以后自動(dòng)刷新頁面(直播程序)
這篇文章主要介紹了直播程序，Vue input輸入框回車以后自動(dòng)刷新頁面,適用場(chǎng)景是在輸入框輸入字符并按下回車鍵搜索時(shí)，刷新頁面，需要的朋友參考下實(shí)現(xiàn)代碼2023-01-01
vue自定義switch開關(guān)組件,實(shí)現(xiàn)樣式可自行更改
今天小編就為大家分享一篇vue自定義switch開關(guān)組件,實(shí)現(xiàn)樣式可自行更改，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11