Skip to content

Instantly share code, notes, and snippets.

@bergantine
Last active September 28, 2015 13:27
Show Gist options
  • Save bergantine/1445036 to your computer and use it in GitHub Desktop.
Save bergantine/1445036 to your computer and use it in GitHub Desktop.
Responsive JS. #javascript #responsive
window.onresize = function() {
responsiveLoad();
}
window.onload = function() {
responsiveLoad();
}
function responsiveLoad() {
console.log('resized');
if (matchMedia) {
var mqs = window.matchMedia("(min-width: 960px)");
mqs.addListener(WidthChangeToScreen);
WidthChangeToScreen(mqs);
var mqt = window.matchMedia("(min-width: 768px) and (max-width: 959px)");
mqt.addListener(WidthChangeToTablet);
WidthChangeToTablet(mqt);
var mqlm = window.matchMedia("(min-width: 480px) and (max-width: 767px)");
mqlm.addListener(WidthChangeToLandscapeMobile);
WidthChangeToLandscapeMobile(mqlm);
var mqpm = window.matchMedia("(max-width: 479px)");
mqpm.addListener(WidthChangeToPortraitMobile);
WidthChangeToPortraitMobile(mqpm);
}
}
function WidthChangeToScreen(mq) {
if (mq.matches) {
// screen is >= 960px wide
}
}
function WidthChangeToTablet(mq) {
if (mq.matches) {
// screen is >= 768px && <= 959px wide
}
}
function WidthChangeToLandscapeMobile(mq) {
if (mq.matches) {
// screen is >= 480px && <= 767px wide
}
}
function WidthChangeToPortraitMobile(mq) {
if (mq.matches) {
// screen is <= 479px wide
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment