改变Css' href'通过浏览器大小更改javascript

时间:2014-06-12 21:09:02

标签: javascript jquery html css css3

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

1 个答案:

答案 0 :(得分:0)

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