js实现浏览器宽度改变,样式随之变化

江禾

于 2020-06-08 22:39:14 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_45785424/article/details/106630428

版权

js 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何通过JavaScript监听浏览器窗口的宽度变化，进而动态调整网页样式，实现响应式设计。通过实例代码，详细讲解了响应式布局的关键点。

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

响应式做法,浏览器宽度

//document.documentElement.clientWidth  浏览器的宽度
 window.onresize = function () {
            //document.documentElement.clientWidth  浏览器的宽度
            if (document.documentElement.clientWidth > 200 && document.documentElement.clientWidth < 300) {
                document.body.style.backgroundColor = "red"
            } else if (document.documentElement.clientWidth > 300 && document.documentElement.clientWidth < 400) {
                document.body.style.backgroundColor = "green"
            } else {
                document.body.style.backgroundColor = "yellow"
            }
        }