在窗口调整大小断点处执行js代码

Question

我有一些 js 代码，我只想在窗口处于“大”屏幕尺寸（假设为 900px）时运行。我想像 CSS 中的媒体查询一样使用它，这样代码就可以在特定的断点处打开和关闭。所以我假设我需要某种带有调整大小功能的条件，如下所示：

$(window).resize(function () {
    var viewportWidth = $(window).width();
    if (viewportWidth < 900) {

    }
});

然后将我想要执行的代码放在大括号之间，但它不起作用。

这是当屏幕大小调整为 900px 时我想要执行的代码：

   function makeRowDiv(buildRow) {
      var row = document.createElement('div');
      row.className = 'row expanded row-spacing';
      for (var i = 0; i < buildRow.length; ++i) { 
        row.appendChild(buildRow[i]);
      } 
      return row;
    }

    window.onload = function () {
      var work = document.getElementById('work'),
          items = work.getElementsByTagName('div'),
          newWork = document.createElement('div');
      var buildRow = [],
          count = 0;
      for (var i = 0; i < items.length; ++i) {
        var item = items[i];
        if (item.className.indexOf('columns') == -1) {
          continue;
        }
        // Extract the desired value.
        var matches = /large-(\d+)\s* large-offset-(\d+)/.exec(item.className),
            delta = parseInt(matches[1], 10) + parseInt(matches[2], 10);
        if (count + delta > 12 && buildRow.length != 0) {
          newWork.appendChild(makeRowDiv(buildRow));
          count = 0;
          buildRow = [];
        }
        buildRow.push(item.cloneNode(true));
        count += delta;
      } 
      if (buildRow.length != 0) {
        newWork.appendChild(makeRowDiv(buildRow));
      } 

      // Replace work with newWork.
      work.parentNode.insertBefore(newWork, work);
      work.parentNode.removeChild(work);
      newWork.id = 'work';
    };

我假设有可能这样做

Answer 1

您也可以在 javascript 中使用媒体查询并将其用作您的条件

var mq = window.matchMedia( "(max-width: 900px)" );
if (mq.matches) {
  // window width is less than 900px
} else {
  // window width is more than 900px
}