vue?px轉(zhuǎn)rem配置詳解
方法一
一、配置與安裝步驟：
1、在 Vue 項目的 src 文件夾下創(chuàng)建一個 config 文件夾：
2、在 config 文件夾中創(chuàng)建 rem.js：
3、將以下代碼復制到 rem.js 中：
// 基準大小
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()
}
4、在 src 文件夾下的 main.js 中引入：
import './config/rem'
5、在 Vue 項目根目錄終端引入：
npm install postcss-pxtorem -D
6、在 Vue 項目文件夾下的 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的設計稿，37.5表示375的設計稿
})
}
}
1.按照px來編寫都會轉(zhuǎn)化成rem的形式，但是有些地方我們不想轉(zhuǎn)換，可以用下面兩種方法。
在px后面添加/no/，不會轉(zhuǎn)化px，會原樣輸出。 — 一般border需用這個
在px后面添加/px/,會根據(jù)dpr的不同，生成三套代碼。---- 一般字體需用這個
2 使用過程中，發(fā)現(xiàn)某些import外聯(lián)樣式不會被轉(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é)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!
相關文章
今天小編就為大家分享一篇vue給對象動態(tài)添加屬性和值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了Vuex新手的理解與使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要為大家詳細介紹了vue2項目的打包優(yōu)化方法,包括減少打包代碼體積和提升編譯時間等,感興趣的小伙伴可以跟隨小編一起學習一下2025-02-02
Vue3?實現(xiàn)驗證碼倒計時功能(刷新保持狀態(tài))
倒計時的運用場景是需要經(jīng)常用到的，但是根據(jù)業(yè)務的不同，好比手機驗證碼或者是郵箱驗證碼之類的，即使用戶跳轉(zhuǎn)到其它頁面或者刷新，再次回到登錄也，驗證碼的倒計時也得保持狀態(tài),下面通過本文給大家分享Vue3?驗證碼倒計時功能實現(xiàn)，感興趣的朋友一起看看吧2022-08-08
vue mounted()函數(shù)中無法定義初始化樣式的原因分析
這篇文章主要介紹了vue mounted()函數(shù)中無法定義初始化樣式的原因分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
關于echarts?清空上一次加載的數(shù)據(jù)問題
這篇文章主要介紹了關于echarts?清空上一次加載的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue中的項目打包及部署全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了vue-resouce設置請求頭的三種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了直播程序，Vue input輸入框回車以后自動刷新頁面,適用場景是在輸入框輸入字符并按下回車鍵搜索時，刷新頁面，需要的朋友參考下實現(xiàn)代碼2023-01-01
vue自定義switch開關組件,實現(xiàn)樣式可自行更改
今天小編就為大家分享一篇vue自定義switch開關組件,實現(xiàn)樣式可自行更改，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11