Javascript 通过查询浏览器的宽度和高度，使用jquery加载选择性css_Javascript_Jquery_Html_Css

Javascript 通过查询浏览器的宽度和高度，使用jquery加载选择性css

javascript jquery html css

Javascript 通过查询浏览器的宽度和高度，使用jquery加载选择性css,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我目前正在使用此脚本根据屏幕宽度加载正确的CSS。它很好用。但是，我在尝试通过查询宽度和高度来加载正确的脚本时遇到了问题。脚本如下。有人能纠正我哪里出了问题吗提前谢谢 function adjustStyle(width) { width = parseInt(width); height = $(window).height(); if (width < 1010) { $("#size-stylesheet").attr("href", "cs

我目前正在使用此脚本根据屏幕宽度加载正确的CSS。它很好用。但是，我在尝试通过查询宽度和高度来加载正确的脚本时遇到了问题。脚本如下。有人能纠正我哪里出了问题吗

提前谢谢

function adjustStyle(width) {
    width = parseInt(width);
    height = $(window).height();
    if (width < 1010) {
        $("#size-stylesheet").attr("href", "css/style_1024.css");
    } else if ((width < 1281) && (height > 780)) {
        $("#size-stylesheet").attr("href", "css/style_1280.css");
    } else if ((width < 1281) && (height < 800)) {
        $("#size-stylesheet").attr("href", "css/style_1280mac.css");
    } else if (width < 1370) {
        $("#size-stylesheet").attr("href", "css/style_1366.css");
    } else if (width < 1450) {
        $("#size-stylesheet").attr("href", "css/style_mac1.css");
    } else if (width < 1610) {
        $("#size-stylesheet").attr("href", "css/style_1600.css");   
    } else {
        $("#size-stylesheet").attr("href", "css/style_FHD.css"); 
    }
}

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

功能调整样式（宽度）{
宽度=parseInt（宽度）；
高度=$（窗口）.height（）；
如果（宽度<1010）{
$（“#大小样式表”）.attr（“href”，“css/style_1024.css”）；
}否则如果（（宽度<1281）和（高度>780））{
$（“#大小样式表”）.attr（“href”，“css/style_1280.css”）；
}否则如果（（宽度<1281）和（高度<800））{
$（“#大小样式表”）.attr（“href”，“css/style_1280mac.css”）；
}否则，如果（宽度<1370）{
$（“#大小样式表”）.attr（“href”，“css/style_1366.css”）；
}否则，如果（宽度<1450）{
$（“#大小样式表”）.attr（“href”，“css/style_mac1.css”）；
}否则，如果（宽度<1610）{
$（“#大小样式表”）.attr（“href”，“css/style_1600.css”）；
}否则{
$（“#大小样式表”）.attr（“href”，“css/style_FHD.css”）；
}
}
$（函数（）{
adjustStyle（$（this）.width（））；
$（窗口）。调整大小（函数（）{
adjustStyle（$（this）.width（））；
});
});

您正在将
宽度
参数传递给函数，但未将
高度
传递给函数，因此出现了此问题。

我已经编辑了代码，希望它能工作

功能调整样式（宽度、高度）{
宽度=parseInt（宽度）；
高度=parseInt（高度）；
如果（宽度<1010）{
$（“#大小样式表”）.attr（“href”，“css/style_1024.css”）；
}否则如果（（宽度<1281）和（高度>780））{
$（“#大小样式表”）.attr（“href”，“css/style_1280.css”）；
}否则如果（（宽度<1281）和（高度<800））{
$（“#大小样式表”）.attr（“href”，“css/style_1280mac.css”）；
}否则，如果（宽度<1370）{
$（“#大小样式表”）.attr（“href”，“css/style_1366.css”）；
}否则，如果（宽度<1450）{
$（“#大小样式表”）.attr（“href”，“css/style_mac1.css”）；
}否则，如果（宽度<1610）{
$（“#大小样式表”）.attr（“href”，“css/style_1600.css”）；
}否则{
$（“#大小样式表”）.attr（“href”，“css/style_FHD.css”）；
}
}
$（函数（）{
调整样式（$（this.width（），$（this.height（））；
$（窗口）。调整大小（函数（）{
调整样式（$（this.width（），$（this.height（））；
});
});

这样做。下面给出的代码正在运行

<!DOCTYPE html>
<html>
<head>
<title>question1</title>
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="style3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>


$(window).ready(function(){


if($(window).width()<1281 && $(window).height()>780)
{
    $("#size-stylesheet").attr("href","style1.css");
}
else if($(window).width()<1281 && $(window).height()<800)
{
    $("#size-stylesheet").attr("href","style2.css");
}
else
{
    $("#size-stylesheet").attr("href","style3.css");
}       


});


$( window ).resize(function() {



if($(window).width()<1281 && $(window).height()>780)
{
    $("#size-stylesheet").attr("href","style1.css");
}
else if($(window).width()<1281 && $(window).height()<800)
{
    $("#size-stylesheet").attr("href","style2.css");
}
else
{
    $("#size-stylesheet").attr("href","style3.css");
}
});

</script>

<body>
<div>
this is a webpage
</div>
</body>
</head>
</html>


问题1
$（窗口）.ready（函数（）{
如果（$（窗口）.width（）780）
{
$（“#大小样式表”）.attr（“href”，“style1.css”）；
}
else if（$（窗口）.width（）为什么不使用CSS媒体查询？它们正是为了这个目的而设计的，并且具有不依赖JS的额外好处，所以你不会得到FOUC，如果有人关闭了JS，它也不会崩溃。嗨，Rory。我没有使用媒体查询的原因是，我在使用它加载多个CSS时遇到了问题。我在一开始的时候就使用过它网站只需要两个不同的css。您好，saif。我尝试使用您的代码，但它仍然会加载脚本中涉及高度的第一个css。当我调整浏览器高度时，它仍然会选择第一个css脚本。例如，高度为780的脚本。即使我调整浏览器大小，它也会忽略800的脚本
<!DOCTYPE html>
<html>
<head>
<title>question1</title>
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="style3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>


$(window).ready(function(){


if($(window).width()<1281 && $(window).height()>780)
{
    $("#size-stylesheet").attr("href","style1.css");
}
else if($(window).width()<1281 && $(window).height()<800)
{
    $("#size-stylesheet").attr("href","style2.css");
}
else
{
    $("#size-stylesheet").attr("href","style3.css");
}       


});


$( window ).resize(function() {



if($(window).width()<1281 && $(window).height()>780)
{
    $("#size-stylesheet").attr("href","style1.css");
}
else if($(window).width()<1281 && $(window).height()<800)
{
    $("#size-stylesheet").attr("href","style2.css");
}
else
{
    $("#size-stylesheet").attr("href","style3.css");
}
});

</script>

<body>
<div>
this is a webpage
</div>
</body>
</head>
</html>