How do I add media Queries into Jquery

Question

Is it possible to add media jquery's into your jquery code?

I need to reduce "slideWidth: 83," when my screen hits a size of 800px;

$(document).ready(function(){
  $('.slider4').bxSlider({
    slideWidth: 83,
    minSlides: 2,
    maxSlides: 9,
    moveSlides: 1,
    slideMargin: 15
  });
});

Answer 1

Media queries are supported in js via window.matchMedia

This allows you to create something like

var isPortrait = window.matchMedia("(orientation: portrait)");
if (isPortrait.matches){
    // Screen is portrait
}

or

var smallScreen = window.matchMedia("(max-width: 480px)");
if (smallScreen.matches){
    // Screen is less than 480px
}

Support is good within modern browsers and there is a polyfill available as well but it doesn't support resizing out of the box.

More info – https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia