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

Question

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

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

此外，它应该加载外部/远程样式表和脚本。

谢谢:)

Answer 1

这里你的答案

<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> 

Answer 2

如果你有不同的screns不同的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> 

我希望这是你正在寻找.. 什么，肯定不会忘了加上jQuery的链接

Answer 3

这将是你改变了class和id动态更好，让CSS做它的工作。

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

首先检测显示类型，并相应地分配类