Vue3中如何使用rem來(lái)控制字體大小問(wèn)題
vue3使用rem控制字體大小
方法一
需要在index.html中寫入監(jiān)聽事件
【注】：獲取html、body是有特定的方法的
<script>
let tid = null;
function resizeWindow() {
const docEl = document.documentElement;
//當(dāng)前頁(yè)面的長(zhǎng)度
const HtmlDom = docEl.getBoundingClientRect().width;
//設(shè)置rem
docEl.style.fontSize = HtmlDom / 192 + "px";
}
window.addEventListener("resize", () => {
this.clearTimeout(tid);
tid = this.setTimeout(resizeWindow, 300);
});
resizeWindow();
</script>記錄vue使用rem實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)響應(yīng)
rem適配介紹
根據(jù) W3C 規(guī)范中對(duì) 1rem 的定義：
1rem 與等于根元素 font-size 的計(jì)算值。當(dāng)明確規(guī)定根元素的 font-size 時(shí)，rem 單位以該屬性的初始值作參照。
這就意味著 1rem 等于 html 元素的字體大?。ù蟛糠譃g覽器根元素的字體大小為16px）
兼容性
- ios：6.1系統(tǒng)以上都支持
- android：2.1系統(tǒng)以上都支持
大部分主流瀏覽器都支持，可以安心的往下看了
rem：（font size of the root element）
意思就是根據(jù)網(wǎng)頁(yè)的根元素來(lái)設(shè)置字體大小，和em（font size of the element）的區(qū)別是，em是根據(jù)其父元素的字體大小來(lái)設(shè)置，而rem是根據(jù)網(wǎng)頁(yè)的根元素（html）來(lái)設(shè)置字體大小的，舉一個(gè)簡(jiǎn)單的例子，
現(xiàn)在大部分瀏覽器IE9+，F(xiàn)irefox、Chrome、Safari、Opera ，如果我們不修改相關(guān)的字體配置，都是默認(rèn)顯示font-size是16px。
舉個(gè)例子：
?? ?//假設(shè)我給根元素的大小設(shè)置為16px
?? ?html{
?? ??? ? font-size：16px
?? ?}
?? ?//那么我底下的p標(biāo)簽如果想要也是16像素
?? ?p{
?? ??? ? font-size:1rem
?? ?}
?? ?//如此即可實(shí)際操作
1. 創(chuàng)建rem.js
// rem等比適配配置文件
// 基準(zhǔn)大小
const baseSize = 16;
// 設(shè)置 rem 函數(shù)
function setRem() {
? // 當(dāng)前頁(yè)面寬度相對(duì)于 1920寬的縮放比例，可根據(jù)自己需要修改。
? const scale = document.documentElement.clientWidth / 1920;
? // 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大?。ā癕ath.min(scale, 2)” 指最高放大比例為2，可根據(jù)實(shí)際業(yè)務(wù)需求調(diào)整）
? document.documentElement.style.fontSize =
? ? baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改變?yōu)g覽器窗口大小時(shí)重新設(shè)置 rem
window.onresize = function() {
? setRem();
};2.在main.js引入rem.js
import './libs/rem.js'
3.頁(yè)面使用
頁(yè)面布局盡量是用百分比，其他所有配置盡量是rem，尤其是字體大小
<div id="div1">我是一個(gè)div標(biāo)簽</div>
#div1{ ? ?
?// width:100%;
? font-size: 1rem; ?
? width: 16rem; ??
? height: 2rem;?
? background-color: lawngreen;
}這樣當(dāng)頁(yè)面改變時(shí)div里面的文字也會(huì)跟著變。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
100行代碼理解和分析vue2.0響應(yīng)式架構(gòu)
通過(guò)100行代碼幫助大家理解和分析vue2.0響應(yīng)式架構(gòu)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue?serve及其與vue-cli-service?serve之間的關(guān)系解讀
這篇文章主要介紹了vue?serve及其與vue-cli-service?serve之間的關(guān)系,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3 table表格組件的使用，文章圍繞table表格組件是如何使用的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了Vue props用法詳解(小結(jié)),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了淺談Vue組件單元測(cè)試究竟測(cè)試什么，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
文章介紹了如何使用`el-table`組件和`render-header`屬性自定義表頭,并添加搜索功能,通過(guò)`Popover`組件和`Clickoutside`指令實(shí)現(xiàn)點(diǎn)擊搜索區(qū)域外隱藏搜索框,解決了多個(gè)表頭搜索框共存時(shí)的沖突問(wèn)題,感興趣的朋友一起看看吧2024-11-11
今天將從 Vue 的入口文件開始，看看聲明了一個(gè) Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯(cuò)過(guò)奧2021-09-09
Vue實(shí)現(xiàn)hash模式網(wǎng)址方式(就是那種帶#的網(wǎng)址、井號(hào)url)
這篇文章主要介紹了Vue實(shí)現(xiàn)hash模式網(wǎng)址方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue+element項(xiàng)目實(shí)時(shí)監(jiān)聽div寬度的變化
這篇文章主要介紹了vue+element項(xiàng)目里實(shí)時(shí)監(jiān)聽某個(gè)div寬度的變化,然后執(zhí)行相應(yīng)的事件,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-08-08
Vue vxe-table使用問(wèn)題收錄小結(jié)
這篇文章主要為大家介紹了Vue vxe-table使用問(wèn)題收錄小結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09