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

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

最好动态更改类和ID，让css完成它的工作。

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

首先检测显示的类型并相应地指定类

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

3 个答案: