vue 實(shí)現(xiàn) rem 布局或vw 布局的方法
一、實(shí)現(xiàn) rem 布局
移動(dòng)端
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
方法一、在 index.html 或者 main.js 中添加以下代碼:
const setHtmlFontSize = () => { let deviceWidth = document.documentElement.clientWidth || document.body.clientWidth if (deviceWidth >= 750) { deviceWidth = 750 } if (deviceWidth <= 320) { deviceWidth = 320 } document.documentElement.style.fontSize = `${deviceWidth / 7.5}px` } window.onresize = setHtmlFontSize setHtmlFontSize()
之后,在寫 css 時(shí),只要將 px 單位替換成 rem,這里設(shè)置的比例是 100px=1rem,例如,寬度為 100px 時(shí),可以直接寫成 1rem。
方法二、cli3 使用 lib-flexible 和 將 px 自動(dòng)轉(zhuǎn)換為 rem 插件
1、安裝插件
npm install lib-flexible --save npm install px2rem-loader --save-dev
或選擇
npm install postcss-plugin-px2rem --save-dev(推薦)
或選擇
npm install postcss-px2rem --save-dev
2、配置插件
在入口文件 main.js 中引入 lib-flexible
import 'lib-flexible/flexible'
3、三種插件的 cli3 配置:
在 vue.config.js 中
//px2rem-loader配置 module.exports = { chainWebpack: config => { config.module .rule('css') .test(/\.css$/) .oneOf('vue') .resourceQuery(/\?vue/) .use('px2rem') .loader('px2rem-loader') .options({ remUnit: 75 }) } } //postcss-plugin-px2rem module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-plugin-px2rem')({ rootValue: 75, //換算基數(shù), 默認(rèn)100 ,這樣的話把根標(biāo)簽的字體規(guī)定為1rem為50px,這樣就可以從設(shè)計(jì)稿上量出多少個(gè)px直接在代碼中寫多上px了。 // unitPrecision: 5, //允許REM單位增長(zhǎng)到的十進(jìn)制數(shù)字。 //propWhiteList: [], //默認(rèn)值是一個(gè)空數(shù)組,這意味著禁用白名單并啟用所有屬性。 // propBlackList: [], //黑名單 exclude: /(node_module)/, //默認(rèn)false,可以(reg)利用正則表達(dá)式排除某些文件夾的方法,例如/(node_module)\/如果想把前端UI框架內(nèi)的px也轉(zhuǎn)換成rem,請(qǐng)把此屬性設(shè)為默認(rèn)值 // selectorBlackList: [], //要忽略并保留為px的選擇器 // ignoreIdentifier: false, //(boolean/string)忽略單個(gè)屬性的方法,啟用ignoreidentifier后,replace將自動(dòng)設(shè)置為true。 // replace: true, // (布爾值)替換包含REM的規(guī)則,而不是添加回退。 mediaQuery: false, //(布爾值)允許在媒體查詢中轉(zhuǎn)換px。 minPixelValue: 3 //設(shè)置要替換的最小像素值(3px會(huì)被轉(zhuǎn)rem)。 默認(rèn) 0 }) ] } } } } //postcss-px2rem配置 module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-px2rem')({ remUnit: 37.5 //設(shè)計(jì)圖除10之后的一半,兼容第三方庫(kù)px轉(zhuǎn)成rem樣式變小的情況 }) ] } } } }
二、cli3 實(shí)現(xiàn) vw 布局
vw 是基于 Viewport 視窗的長(zhǎng)度單位
vw:是 Viewport's width 的簡(jiǎn)寫,1vw 等于 window.innerWidth 的 1%
vh:和 vw 類似,是 Viewport's height 的簡(jiǎn)寫,1vh 等于 window.innerHeihgt 的 1%
vmin:vmin 的值是當(dāng)前 vw 和 vh 中較小的值
vmax:vmax 的值是當(dāng)前 vw 和 vh 中較大的值
1、安裝插件(可以直接轉(zhuǎn)換 px 為 vw)
npm i postcss-px-to-viewport -D
2、在 vue.config.js 中
module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-px-to-viewport')({ viewportWidth: 750, //視口寬度,這里設(shè)置為跟設(shè)計(jì)稿寬度一致; viewportHeight: 1334, //視口高度,隨便設(shè)置一個(gè)就可以; unitPrecision: 3, //轉(zhuǎn)換后值的精度,3表示保留3位小數(shù); viewportUnit: 'vw', //轉(zhuǎn)換成什么視口單位,這里當(dāng)然是vw; selectorBlackList: ['.ignore', '.hairlines'], //是一個(gè)選擇符數(shù)組,對(duì)應(yīng)聲明中的像素單位不會(huì)轉(zhuǎn)換; minPixelValue: 1, //最小像素值,大于等于這個(gè)值才會(huì)轉(zhuǎn)換; mediaQuery: false //是否轉(zhuǎn)換媒體查詢中的像素。 }) ] } } } }
總結(jié)
以上所述是小編給大家介紹的vue 實(shí)現(xiàn) rem 布局或vw 布局的方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
Vue.js 2.0學(xué)習(xí)教程之從基礎(chǔ)到組件詳解
這篇文章主要介紹了Vue.js 2.0從基礎(chǔ)到組件的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考價(jià)值,需要的朋友可以參考學(xué)習(xí),下面來(lái)一起看看吧。2017-04-04Vue實(shí)現(xiàn)移動(dòng)端日歷的示例代碼
工作中遇到一個(gè)需求是根據(jù)日歷查看某一天/某一周/某一月的睡眠報(bào)告,但是找了好多日歷組件都不是很符合需求,只好自己手寫一個(gè)日歷組件,順便記錄一下,希望對(duì)大家有所幫助2023-04-04使用vue-router在Vue頁(yè)面之間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了使用vue-router在Vue頁(yè)面之間傳遞數(shù)據(jù)的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07Babel自動(dòng)生成Attribute文檔實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Babel自動(dòng)生成Attribute文檔實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
這篇文章主要介紹了關(guān)于electron-vue打包后運(yùn)行白屏的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue播放flv、m3u8視頻流(監(jiān)控)的方法實(shí)例
隨著前端大屏頁(yè)面的逐漸壯大,客戶的...其中實(shí)時(shí)播放監(jiān)控的需求逐步增加,視頻流格式也是有很多種,用到最多的.flv、.m3u8,下面這篇文章主要給大家介紹了關(guān)于vue播放flv、m3u8視頻流(監(jiān)控)的相關(guān)資料,需要的朋友可以參考下2023-04-04vue3循環(huán)設(shè)置ref并獲取的解決方案
我們?cè)谄綍r(shí)做業(yè)務(wù)的時(shí)候,父子組件通信會(huì)經(jīng)常用到ref,這篇文章主要給大家介紹了關(guān)于vue3循環(huán)設(shè)置ref并獲取的解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02vue中div禁止點(diǎn)擊事件的實(shí)現(xiàn)
這篇文章主要介紹了vue中div禁止點(diǎn)擊事件的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼
我們?cè)谳斎脬y行賬號(hào)會(huì)設(shè)置每四位添加一個(gè)空格,輸入金額,每三位添加一個(gè)空格。那么,在vue,element-ui 組件中,如何實(shí)現(xiàn)呢?下面小編給大家?guī)?lái)了vue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2018-09-09