Window matchMedia() Method | jQuery Match Media Function

Using the match media jQuery function, change the object behavior according device resolutions. Match media jQuery find the targeted resolution and replace the CSS or object with the new property.

Example: In this tutorial we can learn how to change the desktop view image to mobile view.

HTML

<img src="images/desktop-view-image.jpg">

# Replace the image (desktop-view-image.jpg) with the new image (mobile-view-image.jpg) in mobile view or different resolutions.

Below is the JavaScript code for find the device resolution. if the targeting resolutions are matching the below script replace the image with another image. Remove/add classes on breakpoint with match media function | Window matchMedia() Method.

JavaScript

$(function() {
    if (window.matchMedia("(max-width: 767px)").matches) {
        $('#demo').attr('src', 'images/fullimage1-m.jpg');
     } else {
        $('#demo').attr('src', 'images/fullimage1.jpg');
    }
})

Need to assign one id to <img> tag for replace the image.

<img id="demo" src="images/desktop-view-image.jpg">

Below is the example of owl carousel slider, using the match media function replacing the big image to small image according to mobile view for better image readability.

HTML

<div id='owl-demo' class='owl-carousel owl-theme'>
    <div class='item'>
        <img src='images/banner.jpg' alt=''>
    </div>
</div>

# Replace the image (banner.jpg) with the (banner-m.jpg) in different resolution

JavaScript

<script>
  $(function() {
      var ravenous = function() {
          if (window.matchMedia('(max-width: 767px)').matches)
          {
              var boat="m";
              $('#owl-demo .item img').attr('src', function(index, attr) {
                  return attr.replace(/\.[^.]*$/, '-'+ boat +'$&');
              });
          }
          else {
              }
      };
      $(window).resize(ravenous);
      ravenous();
  });
</script>

In this tutorial we learn the how to get device resolution using match media function and apply or replace the new properties to exiting class or tag. jQuery Match Media Function.

Breakpoint with match media function

<script>
$(function() {
  if (window.matchMedia("(max-width: 767px)").matches) {
    $(".class-name").click(function(){
      $("body").toggleClass("class-name1");
    });
   }
})
</script>

You can customize this code further as per your requirement.