动态加载和卸载css和脚本jQuery

我想根据设备或桌面的屏幕大小动态加载CSS和JS。是否有任何方法或插件可以用于此功能

所以基本上，会有最小和最大的屏幕宽度来触发加载和卸载哪个样式表和脚本。例如，在我的桌面浏览器上，当我调整浏览器的宽度时，将触发样式和脚本的动态加载/卸载

此外，它还可以加载外部/远程样式表和脚本

---

谢谢：）

这里是您的答案

<link rel="stylesheet" type="text/css" href="style.css" class="test">
<script type='text/javascript' src='jquery-1.8.3.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
    var WindowWidth = $(window).innerWidth();
    if(WindowWidth >= 801){
    $("link.test").attr("href", "applyCss.css");
    return false;
    }
    else if(WindowWidth <= 800){
    $("link.test").attr("href", "applyCss-two.css");
    return false;
    }
});
$(window).resize(function() {
    var WindowWidth = $(window).innerWidth();
    if(WindowWidth >= 801){
    $("link.test").attr("href", "applyCss.css");
    return false;
    }
    else if(WindowWidth <= 800){
    $("link.test").attr("href", "applyCss-two.css");
    return false;
    }
});
</script>

$（文档）.ready（函数（）{
var WindowWidth=$（window.innerWidth（）；
如果（窗口宽度>=801）{
$（“link.test”）.attr（“href”，“applyCss.css”）；
返回false；
}
否则如果（窗宽=801）{
$（“link.test”）.attr（“href”，“applyCss.css”）；
返回false；
}
else if（WindowWidth如果不同的屏幕有不同的css文件，最好合并它们，并运行媒体查询。
Jquery和CSS都有自己的媒体查询方法。
例如：

CSS Media Queries-



 @media all and (max-width: 699px) and (min-width: 520px){
      body {
        background-color: green;
        color:white;
      }
    }
    @media all and (max-width: 700px) and (min-width: 1180px){
      body {
        background: black;
        color:yellow;
      }
    }

Jquery:
<script>


$(document).ready(function(){
css_small={
    "background-color":"green",
    "color":"white"
    }
    css_big={
    "background-color":"black",
    "color":"yello"
    }

    if($(window).width <699 && $(window).width >520){
    $(body).css(css_small);
    }
    if($(window).width <1180 && $(window).width >700){
    $(body).css(css_big);
    }
})
$(window).resize(function(){
css_small={
    "background-color":"green",
    "color":"white"
    }
    css_big={
    "background-color":"black",
    "color":"yello"
    }

    if($(window).width <699 && $(window).width >520){
    $(body).css(css_small);
    }
    if($(window).width <1180 && $(window).width >700){
    $(body).css(css_big);
    }
})
</script>

CSS媒体查询-
@所有介质和（最大宽度：699px）和（最小宽度：520px）{
身体{
背景颜色：绿色；
颜色：白色；
}
}
@介质和全部（最大宽度：700px）和（最小宽度：1180px）{
身体{
背景：黑色；
颜色：黄色；
}
}
Jquery：
$（文档）.ready（函数（）{
小的={
“背景色”：“绿色”，
“颜色”：“白色”
}
大的={
“背景色”：“黑色”，
“颜色”：“yello”
}
如果（$（窗口）。宽度520）{
$（body）.css（css_small）；
}
如果（$（窗口）。宽度700）{
$（body）.css（css_big）；
}
})
$（窗口）。调整大小（函数（）{
小的={
“背景色”：“绿色”，
“颜色”：“白色”
}
大的={
“背景色”：“黑色”，
“颜色”：“yello”
}
如果（$（窗口）。宽度520）{
$（body）.css（css_small）；
}
如果（$（窗口）。宽度700）{
$（body）.css（css_big）；
}
})

我希望这就是你要找的。。
是的，别忘了添加jquery链接，最好是动态地更改类和ID，让css完成它的工作

  $('#MyElement').addClass('MyClass');

首先检测显示的类型，并相应地分配类别
查看