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ù)中添加一段代碼來設(shè)置頁面的rem
mounted: function() {
? ? // 頁面開始加載時(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中使用媒體查詢來進(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.然后頁面的默認(rèn)字體大小設(shè)置好了,之后局部樣式的字體大小就自行調(diào)整
4.要注意的是,字體大小的設(shè)置以后都要用rem,這樣是為了以后動(dòng)態(tài)的修改全局字體樣式方便
vue文字大小自適應(yīng)問題
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)文章
Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在使用vue開發(fā)項(xiàng)目的時(shí)候,很多使用會(huì)import很多模塊,這篇文章主要給大家介紹了關(guān)于vue中import導(dǎo)入三種方式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue開發(fā)之LogicFlow自定義業(yè)務(wù)節(jié)點(diǎn)
這篇文章主要為大家介紹了vue開發(fā)之LogicFlow自定義業(yè)務(wù)節(jié)點(diǎn),有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了vue使用fengMap速度慢的原因分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue前后端分離如何解決每次請(qǐng)求session都會(huì)變的問題
這篇文章主要介紹了vue前后端分離如何解決每次請(qǐng)求session都會(huì)變的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue el-switch綁定數(shù)值時(shí)需要注意的問題
在Vue中使用`el-switch`組件時(shí),綁定數(shù)值類型時(shí)應(yīng)使用布爾值（true/false）,而綁定字符串類型時(shí)應(yīng)使用字符串（'true'/'false'）2024-12-12
這篇文章主要介紹了vant中的toast輕提示實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue.js實(shí)現(xiàn)可排序的表格組件功能示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動(dòng)態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
vue通過v-show實(shí)現(xiàn)回到頂部top效果
這篇文章主要介紹了vue通過v-show實(shí)現(xiàn)回到頂部top效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
vue+element-plus上傳圖片及回顯問題及數(shù)量限制
本文主要介紹了vue+element-plus上傳圖片及回顯問題及數(shù)量限制，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04