按浏览器大小更改javascript更改Css“href”

正在尝试应用javascript，如果浏览器窗口或设备大小不同，该javascript将更改Css href。我在这里搜索并测试了它们，但没有结果。 这是到目前为止我的代码。 是的，我尝试过媒体查询，但都不起作用

我尝试使用的媒体查询：

<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)"      href="css/main.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 899px)" href="css/medium.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/narrow.css" />

css链接：

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

整个javascript：

<script type="text/javascript" >  
    function changeImage(a) {
        document.getElementById("img").src=a;
    }

    function adjustStyle(width) {
        width = parseInt(width);
        if (width < 701) {
            $("#size-stylesheet").attr("href", "css/narrow.css");
        } else if ((width >= 701) && (width < 900)) {
            $("#size-stylesheet").attr("href", "css/medium.css");
        } else {
           $("#size-stylesheet").attr("href", "css/wide.css"); 
        }
    }

    $(function() {
        adjustStyle($(this).width());
        $(window).resize(function() {
            adjustStyle($(this).width());
        });
    });

</script>

---

要对JS中的屏幕大小做出反应，可以使用媒体查询

var stylesheet = $("#size-stylesheet");

if (window.matchMedia("(max-width: 700px)").matches) {

    stylesheet.attr("href", "css/narrow.css");

} else if (window.matchMedia("(min-width: 701px) and (max-width: 900px)").matches) {

    stylesheet.attr("href", "css/medium.css");

} else {

    stylesheet.attr("href", "css/wide.css"); 
}

---

为什么不使用？比这容易多了。你可能想发布你试图使用的媒体查询是的，我读了问题中的评论和叫喊。除非大部分的网络都是幻觉，否则它们确实可以工作，而且正是这项工作的正确工具。那么今天成千上万的使用媒体查询的网站就不能工作了？你说他们不工作是什么意思？当然有。你做错了什么。向我们展示你是如何尝试使用媒体查询的。也许可以看看这个问题：同样，不要被上面提到的问题所气馁。改进您的问题，希望有人能帮助您：