Html 如何根据浏览器窗口的大小更改网站背景

我在一个网站上工作，如果浏览器窗口小于一定的大小，部分背景会与文本发生冲突。浏览器窗口变小到一定大小后，是否可以更改背景？

您可以挂接到window.onresize事件以检查窗口的宽度和高度，然后根据这些值设置所需的背景颜色

window.onresize = function(event) {
    var height = window.innerHeight;
    var width = window.innerWidth;
}

此解决方案在其他浏览器中可能与IE存在兼容性问题，因此可能更倾向于使用此功能：

$( window ).resize(function() {
   var height = $(this).height();
   var width = $(this).width();
});

编辑：（提供示例）

window.onresize=函数（事件）{
变量高度=window.innerHeight；
变量宽度=window.innerWidth；
如果（宽度<500 | |高度<500）{
document.getElementById（'Div1'）.style.backgroundColor='#FF0000'；
}
}
//或者使用JQUERY
$（窗口）。调整大小（函数（）{
var height=$（this.height（）；
var width=$（this.width（）；
如果（宽度<500 | |高度<500）{
$（'Div1'）.css（'background-color'，'FF0000'）；
}
});
试验室

---

请注意，当在Chrome中使用innerHeight属性时，该值返回为未定义，因此这似乎不受支持。jQuery方法将是首选解决方案。

我对html、javascript、css以及所有这些都很陌生，那么我如何在html网页中实现这一点呢？示例？用示例更新了帖子，还注意到初始window.onresize示例似乎不是跨浏览器的（我在Chrome中遇到了问题），因此建议使用jQuery方法。如果您的背景是图像，您需要如何修改html？例如。；您将如何改变“scape.jpg”？顺便说一下，非常感谢你的帮助！为映像指定一个ID（

），并使用jQuery查找此映像并更改Src属性，即

$（'Img1'）.attr（'Src'，'newimage.jpg'）
    <script type="text/javascript">
        window.onresize = function (event) {
            var height = window.innereight;
            var width = window.innerWidth;

            if (width < 500 || height < 500) {
                document.getElementById('Div1').style.backgroundColor = '#FF0000';
            }
        }

//OR WITH JQUERY

        $(window).resize(function () {
            var height = $(this).height();
            var width = $(this).width();

            if (width < 500 || height < 500) {
                $('#Div1').css('background-color', '#FF0000');
            }
        });
    </script>

    <div id="Div1" style="width: 300px; height: 300px;">
        test div
    </div>