动态改变html(根元素)的属性值font-size

最新推荐文章于 2025-09-10 23:03:15 发布

原创最新推荐文章于 2025-09-10 23:03:15 发布 · 878 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

收录于

pc端大屏绘制专栏收录该内容

2 篇文章

订阅专栏

该博客探讨了如何利用REM单位结合窗口resize事件，动态设置根元素font-size，以实现响应式网页设计，确保页面在不同屏幕尺寸下展示效果良好。通过监听窗口尺寸变化，实时更新根元素的字体大小，进而比例缩放所有子元素，达到自适应布局的目的。

选择单位rem，根据屏幕大小的不同，动态赋予根元素的font-size值，来调整页面显示问题

data(){
           return{
               show:false,
               screenWidth: document.body.clientWidth, // 屏幕尺寸
           }
       },
       // 钩子函数
       mounted () {
       const that = this
       window.onresize = () => {
       return (() => {
       window.screenWidth = document.body.clientWidth
       that.screenWidth = window.screenWidth
       })()
       }
               var new = document.documentElement;
               new.style.fontSize = that.screenWidth / 96 + 'px'
               console.log(that.screenWidth)
               console.log(d.style.fontSize )
       },