A Pen by diogo oliveira.

CSS-media-queries-in-JS.markdown

CSS media queries in JS

Here's a small hack to easily reflect CSS media queries in JavaScript. I'm using the css content attribute in HTML and I'm not sure abou nasty consequences of this and if it works on every browser. Consider this Highly alpha.

A Pen by diogo oliveira on CodePen.

License.

index.html

<h1>resize the window</h1>

script.js

$(window).on('resize',function(){
  
  var windowSize = $('html').css('content');
  var myColor = '';
  
  switch (windowSize) {
    case 'desktop':
      myColor = 'SkyBlue';
      break;
    case 'tablet':
      myColor = 'YellowGreen';
      break;
    case 'mobile':
      myColor = 'Salmon';
      break;
  }
  
  $('p').text(windowSize);
  $('body').css('backgroundColor',myColor);
  
});

style.css

html {
  content: 'mobile';
}

@media (min-width: 600px) {
  html {
    content: 'tablet';
  }
}
@media (min-width: 1024px) {
  html {
    content: 'desktop';
  }
}