Question

我知道当我们在HTML中链接CSS文件时，我们可以使用media根据某些内容加载不同的样式表，我们可以在链接到脚本时执行此操作吗？这是我的HTML：

    <link rel="stylesheet" href="stylesheet/main.css" />
    <link rel="stylesheet" href="stylesheet/style.css" media="(min-width: 808px)" type="text/css" />
    <link rel="stylesheet" href="stylesheet/mobile.css" media="(max-width: 807px)" type="text/css" />
    <script media="(min-width: 808px)" src = "scripts/script.js"></script>
    <script media="(max-width: 807px)" src = "scripts/mobile.js"></script>

这会有用吗？

Answer 1

没有。 specification for script不会将media列为受支持的属性之一。如果您考虑一下，对于该特定示例，如果在加载页面宽度为850px并运行script.js文件后，用户将窗口大小调整为600px宽，那么浏览器应该做什么？它无法撤消script.js所做的事情。

但是，如果您正在测试无法更改的内容，则可以使用window.matchMedia来确定要动态加载的脚本。（Reasonably supported，包括iOS Safari和Android内置浏览器的最新版本以及大多数移动浏览器的最新版本，但不是IE9或更早版本，或Opera Mini。）

Answer 2

您可以这样写：

var winCurrWidth = $(window).width();

如果发生窗口调整大小，只需添加：

$(window).on('resize', function(){
   winCurrWidth = $(window).width();
});

现在开始这样：

if(winCurrWidth < 808){
  //Do Something..
}
else{
  //Do something else..
}

我们可以在链接到Javascript文件时使用HTML中的媒体属性吗？

2 个答案: