2

随着使用 CSS@media查询的流行，我们现在可以根据查看网页的分辨率设置网页样式。当您调整浏览器窗口的大小时，将立即出现与宽度相关的样式/布局。在 CSS 中，这非常简单，例如

// The heart of "responsive design."
@media screen and (max-width: 1000px) { ... }

本着响应式设计的精神，我们可以在分辨率变化时即时调整 JavaScript 逻辑吗？例如，如果我们的脚本每 10 秒输出一个数字“5”，我们能否将其更改为在将浏览器窗口大小调整为 <300 像素时输出“7”（以相同的间隔）？

// Default script
setTimeout(function() {
  var i = 5;
  console.log(i);
}, 10000);

// How to change the value of i to 7, upon window resize?
// Ideally, without a page reload.
4

3 回答 3

3

处理window.resize事件：

window.onresize = function () {
    // check if the new height/width is <300
    // change your i variable
};

为了使其工作，您的i变量必须位于调整大小处理程序和您传递给 setTimeout 的匿名变量共享的范围内。

获取窗口高度/宽度的答案。

于 2012-08-06T14:50:37.737 回答
0

如果您想要每 10 秒显示一个数字（基于 with），则代码如下：

setInterval(function() {
    var num = (window.outerWidth <= 300) ? 7 : 5;
    console.log(i);
}, 10000);

如果您想要在调整窗口大小时显示数字，您应该处理window.reseize事件，正如@jbabey 回答的那样。

于 2012-08-06T14:53:57.400 回答
0

您无法在 CSS 和 JS 之间准确传递变量，但 Javascript 公开了resize事件，您可以将其绑定到window.

例如：

function (event) {
  if (event.srcElement.outerWidth <= 1000 ){
    // do something
  }
}

工作 JSFiddle 演示

于 2012-08-06T14:47:43.243 回答