Question

如果浏览器的屏幕宽度小于'x'px，我正在制作一个实现Javascript功能的响应式网站。

然而，如果窗口在页面最初加载时是真的，那么我所做的代码似乎只能起作用，而不是稍后重新调整浏览器的大小，例如。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
    if ($(window).width() < 500) {
        $("#foo").css("background-color", "red");
    }
});
</script>
</head>

<body>
<div id="foo" style="height: 100px; background-color:blue;"></div>
</body>
</html>

在此示例背景中，如果浏览器是＆lt;背景颜色，则背景颜色保持蓝色。 500px，如果浏览器最初加载的内容为501px或更高。我希望能够调整浏览器的大小并实时触发Javascript。

感谢任何建议。

Answer 1

.resize()

$(function () {
    $(window).resize(function () { //put your code in window.resize so that it runs when ever window is resized
        if ($(window).width() < 500) {
            $("#foo").css("background-color", "red");
        }
    }).resize(); //call resize function 
});

jQuery窗口宽度不按预期工作

1 个答案: