Vue3中如何使用rem來(lái)控制字體大小問(wèn)題
vue3使用rem控制字體大小
方法一
需要在index.html中寫(xiě)入監(jiān)聽(tīng)事件
【注】：獲取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 元素的字體大小（大部分瀏覽器根元素的字體大小為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)文章
Vue學(xué)習(xí)筆記進(jìn)階篇之多元素及多組件過(guò)渡
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之多元素及多組件過(guò)渡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要給大家介紹了關(guān)于Vue3中watchEffect用途的相關(guān)資料, watch和watchEffect都是監(jiān)聽(tīng)器,但在寫(xiě)法和使用上有所區(qū)別,本文進(jìn)行了詳細(xì)的介紹,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue2中使用sass并配置全局的sass樣式變量的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
下面小編就為大家?guī)?lái)一篇基于Vue生產(chǎn)環(huán)境部署詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
在項(xiàng)目中使用ref時(shí)有時(shí)候直接取值,有時(shí)候返回的卻是一個(gè)數(shù)組,不知其中緣由,后查了一下ref用法,在這里給大家分享vue中ref的用法,感興趣的朋友一起看看吧2023-11-11
Vue3中的極致防抖/節(jié)流詳解(附常見(jiàn)方式防抖/節(jié)流)
在JavaScript中函數(shù)的防抖和節(jié)流不是什么新鮮話題,這篇文章主要給大家介紹了關(guān)于Vue3中極致防抖/節(jié)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
vue3.2最新語(yǔ)法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解
這篇文章主要為大家介紹了vue3.2最新語(yǔ)法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)給特殊字段設(shè)置插槽,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以學(xué)習(xí)一下2023-09-09
vue項(xiàng)目中全局引入1個(gè).scss文件的問(wèn)題解決
這篇文章主要跟大家介紹了vue項(xiàng)目中全局引入1個(gè).scss文件的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08