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

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属性时，该值返回为未定义，因此这似乎不受支持。jQuery 方法将是首选解决方案。