Question

尝试应用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>

Answer 1

要对JS中的屏幕尺寸作出反应，您可以使用媒体查询use matchMedia()。

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"); 
}

改变Css＆＃39; href＆＃39;通过浏览器大小更改javascript

1 个答案: