Basic Load and Resize jQuery to start from

squarecandy-responsive-basics.js

 /***********
 RESPONSIVE CALCULATIONS
 **********/

// On the first time the page loads, or if the orientation changes
// (portrait to landscape, etc) call the recalculation script
$(window).on('load orientationchange', function(){
  responsive_calc();
});

// For the resize event, only call recalculation if the WIDTH changes
// This avoids jumpyness with mobile URL bar showing and hiding
test_w = get_w();
// set the browser width data on initial load somewhere we can access it later
$('body').data('w',test_w);
$(window).on('resize', function(){
  w = get_w();
  // only call recalculation if the new width is different from the initial load width
  if (w != test_w) {
    responsive_calc();
  }
});

var responsive_calc = function(){

  // get the viewport height & width
  var h = get_h();
  var w = get_w();

  // do some things based on screen size
  var breakPoint = 800;
  if (w < breakPoint) {
    // Small Stuff!!!
  }
  else {
    // Big Stuff!!!
  }

}

var get_w = function(){
  return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}
var get_h = function(){
  return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}