vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)
更新時(shí)間：2022年09月19日 09:10:55 作者：藍(lán)楓秋千
這篇文章主要介紹了vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
響應(yīng)式布局將字體大小改成自適應(yīng)
1.在app.vue的生命周期函數(shù)中添加一段代碼來(lái)設(shè)置頁(yè)面的rem
mounted: function() {
? ? // 頁(yè)面開(kāi)始加載時(shí)修改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中使用媒體查詢來(lái)進(jìn)行階段性的字體大小設(shè)置(這個(gè)自己調(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;
? }
}
/* 臺(tái)式電腦顯示器屏幕字體大小 */
@media screen and (min-width: 1024px) {
? #app {
? ? font-size: 0.08rem;
? }
}3.然后頁(yè)面的默認(rèn)字體大小設(shè)置好了,之后局部樣式的字體大小就自行調(diào)整
4.要注意的是,字體大小的設(shè)置以后都要用rem,這樣是為了以后動(dòng)態(tài)的修改全局字體樣式方便
vue文字大小自適應(yīng)問(wèn)題
font-size:calc(100vw * 24 / 1920);?
calc：是一個(gè)css自帶的計(jì)算方法，可以自動(dòng)計(jì)算后返回px單位的值100vw：vw是屏幕的寬度。也就是百分百屏幕寬度。*100：這里乘的100代表100px。1920：設(shè)計(jì)稿的寬度
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置）
制作一個(gè)折線圖用于顯示當(dāng)前24小時(shí)的數(shù)據(jù)，并且可以通過(guò)拖動(dòng)折現(xiàn)圖設(shè)置數(shù)據(jù)，接下來(lái)通過(guò)本文給大家分享vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置），感興趣的朋友跟隨一起學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue 事件處理操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js事件處理相關(guān)的事件監(jiān)聽(tīng)、處理、修飾符等相關(guān)概念、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
Vue在啟動(dòng)時(shí)卡住了,啟動(dòng)不了的問(wèn)題及解決
這篇文章主要介紹了Vue在啟動(dòng)時(shí)卡住了,啟動(dòng)不了的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中使用h5 video標(biāo)簽實(shí)現(xiàn)彈窗播放本地視頻的方法
本文主要介紹了vue中使用h5 video標(biāo)簽實(shí)現(xiàn)彈窗播放本地視頻的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了Vue中父子組件如何實(shí)現(xiàn)傳值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)進(jìn)度條變化效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Object.assign觸發(fā)watch原理示例解析
這篇文章主要為大家介紹了Object.assign觸發(fā)watch原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue-cli3 $ is not defined錯(cuò)誤問(wèn)題及解決
這篇文章主要介紹了Vue-cli3 $ is not defined錯(cuò)誤問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue.js實(shí)現(xiàn)大屏數(shù)字滾動(dòng)翻轉(zhuǎn)效果
大屏數(shù)字滾動(dòng)翻轉(zhuǎn)效果來(lái)源于最近工作中element后臺(tái)管理頁(yè)面一張大屏的UI圖，該UI圖上有一個(gè)模塊需要有數(shù)字往上翻動(dòng)的效果。本文通過(guò)截圖代碼的形式給大家介紹Vue.js實(shí)現(xiàn)大屏數(shù)字滾動(dòng)翻轉(zhuǎn)效果，感興趣的朋友一起看看吧2019-11-11
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10