JSFiddle - React, Tailwind, and code Playground

by Kamran Ayub

HTML

<ul>
    <li>MediumImageUrl (Default, No Queries)</li>
    <li data-media="(min-width: 320px) and (max-width: 600px)">SmallImageUrl</li>
    <li data-media="(min-width: 601px) and (max-width: 767px)">MediumImageUrl</li>
    <li data-media="(min-width: 768px)">ExtraLargeImageUrl</li>
</ul>

JavaScript

//
// *************************************************
// DO NOT USE AS REFERENCE FOR EFFICIENT jQUERY CODE
// *************************************************
//
var $queries = $("[data-media]");

var evalQueries = function(){
    
    // hide default
    $("li:not([data-media])").hide();
    
    // eval media queries and hide/show
    $queries.each(function(q) {
        var query = $(this).attr("data-media");
        
        if (window.matchMedia(query).matches) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
};

// onresize
$(window).on('resize', evalQueries);
evalQueries();