How to get css mediaquery breakpoint using javascript.

Dec 13, 2014

Motivation

It is waste of time to fix the value of breakpoint for responsive design if you have that value in css and javascript. In the following case you have to fix both 400 and 400px.

ccs

@media screen and (min-width: 400px){
  body:after{
    content: 'desktop';
    display: none;
  }
}

Javascript

// ....
// ....
var minWidth = 400;

function isSp(){
   return !(minWidth < window.innerWidth);
}

using window.getComputedStyle

css

@media screen and (min-width: 400px){
  body:after{
    content: 'desktop';
    display: none;
  }
}

javascript

// desktop or ''
var deviceWidth = window.getComputedStyle(document.body,':after').getPropertyValue('content');

function isSp(){
  return deviceWidth !== 'desktop';
}

Deomo

http://codepen.io/Tkashiro/full/zxqwBK