public
Created

Setting breakpoints for responsive design

  • Download Gist
Responsive Design Breakpoints
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
// Source: http://www.onextrapixel.com/2012/10/04/10-useful-and-time-saving-javascript-snippets/?utm_source=buffer&buffer_share=16db9
 
function isBreakPoint(bp) {
// The breakpoints that you set in your css
var bps = [320, 480, 768, 1024];
var w = $(window).width();
var min, max;
for (var i = 0, l = bps.length; i < l; i++) {
if (bps[i] === bp) {
min = bps[i-1] || 0;
max = bps[i];
break;
}
}
return w > min && w <= max;
}
 
// Usage
 
if ( isBreakPoint(320) ) {
// breakpoint at 320 or less
}
if ( isBreakPoint(480) ) {
// breakpoint between 320 and 480
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.