media query

raw js

by Oleh Kotsubko

JavaScript

if(matchMedia){
	let screenQuery = window.matchMedia("(max-width: 768px)");
	screenQuery.addListener(checkMedia);
	checkMedia(screenQuery);
}

function checkMedia(e){
	let c = e.media.replace(/[^\d]/g, "");
	console.log((e.matches ? " less " : " more ") + ' than ' + c + 'px');
  
  if(e.matches) {
  	document.body.style.backgroundColor = "green";
  } else {
  	document.body.style.backgroundColor = "red";
  }
}