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)前頁面寬度相對于 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項(xiàng)目預(yù)覽excel表格功能(file-viewer插件)
這篇文章主要介紹了vue項(xiàng)目預(yù)覽excel表格功能(file-viewer插件),本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式
這篇文章主要給大家介紹了在vue中,父子組件傳遞參數(shù)?props?實(shí)現(xiàn)方式,文章通過代碼示例介紹的非常詳細(xì),對我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)的實(shí)例詳解(params/query)
在使用`router.push`進(jìn)行路由跳轉(zhuǎn)到另一個(gè)組件時(shí),可以通過`params`或`query`來傳遞參數(shù),這篇文章主要介紹了vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)(params/query),需要的朋友可以參考下2023-09-09vue3 Vite 進(jìn)階rollup命令行使用詳解
這篇文章主要介紹了vue3 Vite 進(jìn)階rollup命令行使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08