js+rem实现页面自适应大小

最新推荐文章于 2025-04-09 08:58:50 发布

可可爱爱的你吖

最新推荐文章于 2025-04-09 08:58:50 发布

阅读量1.3k

点赞数 2

分类专栏： js 文章标签： javascript

开心

本文链接：https://blog.csdn.net/weixin_45324044/article/details/123136821

版权

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何利用JavaScript和rem单位调整网页尺寸，确保页面在不同设备上自适应。首先设置html元素的字体大小，然后监听窗口resize事件以更新字体大小。此外，推荐使用VSCode的px转rem插件，以及配置编辑器将px自动转换为rem，从而简化开发流程。注意保持根元素大小的稳定，以避免样式混乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js+rem实现页面自适应大小

1.sript标签中设置页面根元素大小

   let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
        // 获取html的dom
        let htmlDom = document.getElementsByTagName('html')[0];
        // 设置html的font-size
        htmlDom.style.fontSize = htmlWidth / 10 + 'px';
        window.addEventListener('resize', (e) => {
            let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
            htmlDom.style.fontSize = htmlWidth / 10 + 'px';
        });