vue中響應式布局如何將字體大小改成自適應
更新時間：2022年09月19日 09:10:55 作者：藍楓秋千
這篇文章主要介紹了vue中響應式布局如何將字體大小改成自適應，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
響應式布局將字體大小改成自適應
1.在app.vue的生命周期函數(shù)中添加一段代碼來設置頁面的rem
mounted: function() {
? ? // 頁面開始加載時修改font-size
? ? var html = document.getElementsByTagName("html")[0];
? ? var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
? ? // 這里的750是指設計圖的大小,自己根據(jù)實際情況改變
? ? html.style.fontSize = oWidth / 750 * 100 + "px";
? ? console.log('rem:', html.style.fontSize);
? }2.在style中使用媒體查詢來進行階段性的字體大小設置(這個自己調(diào)整試一試,我調(diào)的可能不合適)
/* 手機屏幕的字體大小 */
@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.然后頁面的默認字體大小設置好了,之后局部樣式的字體大小就自行調(diào)整
4.要注意的是,字體大小的設置以后都要用rem,這樣是為了以后動態(tài)的修改全局字體樣式方便
vue文字大小自適應問題
font-size:calc(100vw * 24 / 1920);?
calc：是一個css自帶的計算方法，可以自動計算后返回px單位的值100vw：vw是屏幕的寬度。也就是百分百屏幕寬度。*100：這里乘的100代表100px。1920：設計稿的寬度
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue2.X和Vue3.0數(shù)據(jù)響應原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應原理變化的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
在使用vue開發(fā)項目的時候,很多使用會import很多模塊,這篇文章主要給大家介紹了關于vue中import導入三種方式的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
vue開發(fā)之LogicFlow自定義業(yè)務節(jié)點
這篇文章主要為大家介紹了vue開發(fā)之LogicFlow自定義業(yè)務節(jié)點,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了vue使用fengMap速度慢的原因分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue前后端分離如何解決每次請求session都會變的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue el-switch綁定數(shù)值時需要注意的問題
在Vue中使用`el-switch`組件時,綁定數(shù)值類型時應使用布爾值（true/false）,而綁定字符串類型時應使用字符串（'true'/'false'）2024-12-12
這篇文章主要介紹了vant中的toast輕提示實現(xiàn)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue.js實現(xiàn)可排序的表格組件功能,涉及vue.js事件響應、元素動態(tài)操作、排序、運算等相關操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了vue通過v-show實現(xiàn)回到頂部top效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
vue+element-plus上傳圖片及回顯問題及數(shù)量限制
本文主要介紹了vue+element-plus上傳圖片及回顯問題及數(shù)量限制，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04