使用jQuery .resize（）处理DOM

Question

I want to change the order of elements in the DOM based on different browser sizes.

I've looked into using intention.js but feel that it might be overkill for what I need (it depends on underscore.js ).

So, i'm considering using jQuery's .resize() , but want to know if you think something like the following would be acceptable, and in line with best practices...

var layout = 'desktop';
$( window ).resize(function() {
    var ww = $( window ).width();
    if(ww<=767 && layout !== 'mobile'){
        layout = 'mobile';
        // Do something here
    }else if((ww>767 && ww<=1023) && layout !== 'tablet'){
        layout = 'tablet';
        // Do something here
    }else if(ww>1023 && layout !== 'desktop'){
        layout = 'desktop';
        // Do something here
    }
}).trigger('resize');

I'm storing the current layout in the layout variable so as to only trigger the functions when the window enters the next breakpoint.

Answer 1

Media queries are generally preferred. However, if I am in a situation where I am in a single page application that has a lot of manipulation during runtime, I will use onresize() instead. Javascript gives you a bit more freedom to work with dynamically setting breakpoints (especially if you are moving elements around inside the DOM tree with stuff like append()). The setup you have is pretty close to the one I use:

function setWidthBreakpoints(windowWidth) {
    if (windowWidth >= 1200) {
        newWinWidth = 'lg';
    } else if (windowWidth >= 992) {
        newWinWidth = 'md';
    } else if (windowWidth >= 768) {
        newWinWidth = 'sm';
    } else {
        newWinWidth = 'xs';
    }
}

window.onresize = function () {

    setWidthBreakpoints($(this).width());

    if (newWinWidth !== winWidth) {
        onSizeChange();
        winWidth = newWinWidth;
    }
};

function onSizeChange() {
// do some size changing events here.
}

The one thing that you have not included that is considered best practice is a debouncing function , such as the one below provided by Paul Irish, which prevents repeated firing of the resize event in a browser window:

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});

So incorporate a debouncer into your resize function and you should be golden.

Answer 2

在实践中最好使用媒体查询

Answer 3

Try this , I'm in a hurry atm and will refactor later.

SCSS:

body, html, .wrapper { width: 100%; height: 100% }

.sidebar { width: 20%; height: 500px; float: left;      
  &.mobile { display: none } }  

.content { float: right; width: 80% }

.red { background-color: red }
.blue { background-color: blue }
.green { background-color: green }

@media all and (max-width: 700px) {
  .content { width: 100%; float: left }
  .sidebar { display: none 
    &.mobile { display: block; width: 100% }
  }
}

HAML

.wrapper
  .sidebar.blue
  .content.red
  .content.green
  .sidebar.mobile.blue 

On 700 px page breaks, sidebar disappears and mobile sidebar appears. This can be much more elegant but you get the picture.

Only possible downside to this approach is duplication of sidebar.

That's it, no JS.

Answer 4

Ok, the reason for my original question was because I couldn't find a way to move a left sidebar (which appears first in the HTML) to appear after the content on mobiles.

Despite the comments, I still can't see how using media queries and position or display alone would reliably solve the problem (perhaps someone can give an example?).

But, it did lead me to investigate the flexbox model - display: flex , and so I have ended up using that, and specifically flex's order property to re-arrange the order of the sidebars and content area.

Good guide here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/