vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)
響應(yīng)式布局將字體大小改成自適應(yīng)
1.在app.vue的生命周期函數(shù)中添加一段代碼來設(shè)置頁面的rem
mounted: function() { ? ? // 頁面開始加載時修改font-size ? ? var html = document.getElementsByTagName("html")[0]; ? ? var oWidth = document.body.clientWidth || document.documentElement.clientWidth; ? ? // 這里的750是指設(shè)計(jì)圖的大小,自己根據(jù)實(shí)際情況改變 ? ? html.style.fontSize = oWidth / 750 * 100 + "px"; ? ? console.log('rem:', html.style.fontSize); ? }
2.在style中使用媒體查詢來進(jìn)行階段性的字體大小設(shè)置(這個自己調(diào)整試一試,我調(diào)的可能不合適)
/* 手機(jī)屏幕的字體大小 */ @media screen and (max-width: 768px) { ? #app { ? ? font-size: 0.05rem; ? } } /* 筆記本電腦的字體大小 */ @media screen and (min-width: 768px) and (max-width: 1024px) { ? #app { ? ? font-size: 0.08rem; ? } } /* 臺式電腦顯示器屏幕字體大小 */ @media screen and (min-width: 1024px) { ? #app { ? ? font-size: 0.08rem; ? } }
3.然后頁面的默認(rèn)字體大小設(shè)置好了,之后局部樣式的字體大小就自行調(diào)整
4.要注意的是,字體大小的設(shè)置以后都要用rem,這樣是為了以后動態(tài)的修改全局字體樣式方便
vue文字大小自適應(yīng)問題
font-size:calc(100vw * 24 / 1920);?
calc
:是一個css自帶的計(jì)算方法,可以自動計(jì)算后返回px單位的值100vw
:vw是屏幕的寬度。也就是百分百屏幕寬度。*100
:這里乘的100代表100px。1920
:設(shè)計(jì)稿的寬度
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+echarts實(shí)現(xiàn)可拖動節(jié)點(diǎn)的折線圖(支持拖動方向和上下限的設(shè)置)
制作一個折線圖用于顯示當(dāng)前24小時的數(shù)據(jù),并且可以通過拖動折現(xiàn)圖設(shè)置數(shù)據(jù),接下來通過本文給大家分享vue+echarts實(shí)現(xiàn)可拖動節(jié)點(diǎn)的折線圖(支持拖動方向和上下限的設(shè)置),感興趣的朋友跟隨一起學(xué)習(xí)吧2019-04-04vue中使用h5 video標(biāo)簽實(shí)現(xiàn)彈窗播放本地視頻的方法
本文主要介紹了vue中使用h5 video標(biāo)簽實(shí)現(xiàn)彈窗播放本地視頻的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04Object.assign觸發(fā)watch原理示例解析
這篇文章主要為大家介紹了Object.assign觸發(fā)watch原理示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Vue-cli3 $ is not defined錯誤問題及解決
這篇文章主要介紹了Vue-cli3 $ is not defined錯誤問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07Vue.js實(shí)現(xiàn)大屏數(shù)字滾動翻轉(zhuǎn)效果
大屏數(shù)字滾動翻轉(zhuǎn)效果來源于最近工作中element后臺管理頁面一張大屏的UI圖,該UI圖上有一個模塊需要有數(shù)字往上翻動的效果。本文通過截圖代碼的形式給大家介紹Vue.js實(shí)現(xiàn)大屏數(shù)字滾動翻轉(zhuǎn)效果,感興趣的朋友一起看看吧2019-11-11