vue页面初始化大小rem，自适应效果设置

最新推荐文章于 2025-03-31 16:28:37 发布

转载最新推荐文章于 2025-03-31 16:28:37 发布 · 9.5k 阅读

文章标签：

#VUE

VUE 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态调整页面字体大小的方法，通过监听窗口加载和尺寸变化事件，实现根据不同屏幕宽度自适应调整rem基准值。

window.onload = function(){
    getRem(750,100)
};
window.onresize = function(){
    getRem(750,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}