Jquery implements different ways to use different CSS stylesheets for browsers of different sizes

1. First define two links, or you can have one, and then the CSS you want to change

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

2. The following JavaScript code will change CSS according to different browser sizes

function adjustStyle(width) { 
    width = parseInt(width); 
    if (width < 701) { 
        $("#css").attr("href", "css/narrow.css"); 
    } else if ((width >= 701) && (width < 900)) { 
        $("#css").attr("href", "css/medium.css"); 
    } else { 
       //$("#css").attr("href", "<?php bloginfo('stylesheet_url'); ?>"); 
       document.write("css/style.css")
    } 
} 
$(function() { 
    adjustStyle($(this).width()); 
    $(window).resize(function() { 
        adjustStyle($(this).width()); 
    }); 
});

The above code has been tested available!!