CSS + jquery响应式背景颜色变化

Question

我希望实现的目标是，如果窗口大小超过400，#box2颜色会变为黑色（在#box1上转移时），如果小于400，{ {1}}颜色变为黄色。

我以为我完成了这个任务，但是我发现我总是需要刷新页面才能看到效果。窗口大小更改后，jQuery不会立即生效。

我是否需要使用ajax或其他东西来使jQuery响应工作？

在线示例：http://jsfiddle.net/dFbXr/

这是我的代码

#box2

Answer 1

您需要在首次加载页面和调整窗口大小时调用colorchange()函数。您可以使用以下代码处理“resize”事件：

$(window).on("resize",colorchange);

请注意，colorchange作为参数传递给.on() function 而不带括号，即colorchange而不是colorchange()。没有parens传递对函数的引用，parens立即调用函数并传递其结果。

演示：http://jsfiddle.net/dFbXr/1/

您提到了Ajax，但Ajax与手头的问题完全无关：它是用于从Web服务器发送和/或接收数据而无需重新加载整个页面。

Answer 2

你只需要调用一次colorchange()函数 - 你需要在调整窗口大小时再次调用它，否则它只会通过你的if-else一次。

您需要将此jQuery添加到您的代码中：

$(window).on("resize",colorchange);

Answer 3

如果您只支持CSS3个浏览器并且不想依赖JavaScript，则可以通过屏幕大小更改:hover的效果来使用媒体查询来实现相同的功能

以下是一个简单示例：http://jsfiddle.net/dFbXr/2/