Question

我正在开发一个网站，如果浏览器窗口小于特定大小，则背景的一部分会与文本冲突。浏览器窗口变得小于一定数量后，是否可以更改背景？

Answer 1

您可以挂钩window.onresize事件来检查窗口的宽度和高度，然后根据这些值，您可以将背景颜色设置为您想要的颜色。

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

此解决方案在IE浏览器的其他浏览器中可能存在兼容性问题，因此jQuery函数可能更受欢迎：

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

编辑：（提供示例）

    <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>

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

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

1 个答案: