How To Use Media Queries In Javascript

I know little to nothing about JavaScript so I'm not even sure if my question makes sense. My point however is how to apply the same principle of media queries to change particular

Solution 1:

You actually do have something similar to Media Queries in JS:

if (matchMedia("(min-width: 900px)").matches) {
  // the viewport is at least 900 pixels wide
}

Solution 2:

You can define .resolution-check class in css when to be visible:

@mediaonly screen and (max-width: 900px) {
  .resolution-check {
    display: block;
  }
}

and then simply check in JS if that element is visible:

if ($('.resolution-check').is(':visible')) {

  //do stuff here

}

This way you can control media queries in one place, in CSS

Solution 3:

functioncheckMatchMedia(pQuery) {
    if (!window.matchMedia) {returnfalse;}
    if (window.matchMedia(pQuery).matches) {returntrue;}
    returnfalse;
}

var vIsOK = checkMatchMedia("(min-width: 500px)");
if (vIsOK) {
    console.log('window width is at least 500px');
} else {
    if (window.matchMedia) {
        console.log('window width is less then 500px');
    } else {
        console.log('Please include Polyfill.');
    }
}

There is only a small problem with this, that is that older IE do not supports this.

This fixed with adding a libraries named polyfill .

Solution 4:

How to use Media Queries in JavaScript and replace div or image or text Proto Theme Logo Change on mobile

jQuery(function($){ 
      if (window.matchMedia("(max-width: 500px)").matches) {
    $( ".vc_responsive .logo > a > img " ).replaceWith( "<img class='img-responsive standard-logo' src='your URL' alt='Xtreme'>" );
        }
        });