Question

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

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

本着响应式设计的精神，我们可以在分辨率变化时即时调整JavaScript逻辑吗？例如，如果我们的脚本每10秒输出一个数字'5'，那么当浏览器窗口调整为<300px时，我们是否可以将其更改为输出'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.

Answer 1

处理window.resize事件：

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

为了使其正常工作，您的i变量必须位于resize处理程序共享的范围内，并且您传递给setTimeout的匿名。

回答Getting window height/width。

Answer 2

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

例如：

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

<强> Working JSFiddle Demo

Answer 3

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

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

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

在浏览器窗口调整大小时更改JS逻辑

3 个答案: