Question

我正在构建一个基于引导程序的布局，在大型上有4列和2行，在小型和1列上有2列4行，在超小型上有8行，并且在一些帮助下我设法构建了脚本触发媒体查询断点时操纵DOM以在较小屏幕大小的行之间插入新行和hr分频器; 这适用于相邻的MQ断点，但是当触发媒体查询断点以重置DOM时，我需要刷新页面，因为布局开始在媒体查询断点处进一步制动，窗口被调整大小。我知道如何在窗口宽度调整大小上刷新页面，但这是不切实际的，因为它会在每次调整窗口大小时刷新页面，我只需要在媒体查询断点上触发刷新。我该怎么做？

这是我用来操作dom的脚本：

    var $mainElem = $('.latest-posts'),
  $parent = $mainElem.parent(),
  $nav=$('.before-navigation')

if ($(window).width() < 768){     
  var $items = $mainElem.children(':gt(0)').detach()
  if ($items.length) {
    for (var i = 0; i < $items.length; i = i + 1) {
      var $row = $('<div class="row latest-posts">').append($items.slice(i, i + 1));
      $nav.before('<hr class="small-article-divider">').before($row);

    }
  }
}else if ($(window).width() >= 768 && $(window).width() <= 970){     
  var $items = $mainElem.children(':gt(1)').detach()
  if ($items.length) {
    for (var i = 0; i < $items.length; i = i + 2) {
      var $row = $('<div class="row latest-posts">').append($items.slice(i, i + 2));
      $nav.before('<hr class="small-article-divider">').before($row);

    }
  }
}else if($(window).width() > 970){
  var $items = $mainElem.children(':gt(3)').detach()
  if ($items.length) {
    for (var i = 0; i < $items.length; i = i + 4) {
      var $row = $('<div class="row latest-posts">').append($items.slice(i, i + 4));
      $nav.before('<hr class="small-article-divider">').before($row);

    }
  }
}

Answer 1

做@charlietfl说的话。找到一种更好的方法来构建HTML / CSS。像这样操纵DOM可能是不必要的。我认为更改设计以避免页面刷新。

但是，如果你坚持，请为context设置一个变量。

var context;
var $window = $(window);

// run this right away to set context
if ($window.width() <= 768) {
    context = 'small';
} else if (768 < $window.width() < 970) {
    context = 'medium';
} else {
    context = 'large';
}

// refresh the page only if you're crossing into a context
// that isn't already set
$(window).resize(function() {
    if(($window.width() <= 768) && (context != 'small')) {
        //refresh the page
        location.reload();
    } else if ((768 < $window.width()  < 970) && (context != 'medium')) {
        location.reload();
    } else if (context != 'large') {
        location.reload();
    }
});

请记住检查resize和orientationchange（jQuery支持这些事件，还有其他可以使用的库）。

触发媒体查询断点时刷新页面

1 个答案: