您不能直接使用 Javascript <script> 标记来执行此操作。媒体查询用于链接的 CSS 文件或内联 CSS 样式。一个基本的例子：
<link rel="stylesheet" media="screen and (min-width: 900px)" href="desktop.css"/>
<link rel="stylesheet" media="screen and (min-width: 571px)" href="tablet.css"/>
<link rel="stylesheet" media="screen and (max-width: 570px)" href="mobile.css"/>
或直接在您的样式表中：
@media screen and (max-width: 599px) {
#mobile {
display: block;
}
}
但是，您可以使用外部资产加载器/媒体查询库来执行此操作（require.js、modernizr.js、enquire.js 等），在这种情况下，我使用enquire.js 设置示例，因为我认为它非常有效并且默认不需要jQuery：
完整示例
1) 包含 enquire.js（可用here）：
<script type="text/javascript" src="/js/enquire.js"></script>
2）创建加载函数——加载JS文件：
<script type="text/javascript">
// This loads JS files in the head element
function loadJS(url)
{
// adding the script tag to the head
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// fire the loading
head.appendChild(script);
}
</script>
3) 触发 enquire.js 并监听媒体查询更改（加载和调整大小）：
<script type="text/javascript">
enquire.register("screen and (max-width: 599px)", {
match : function() {
// Load a mobile JS file
loadJS('mobile.js');
}
}).listen();
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
// Load a tablet JS file
loadJS('tablet.js');
//console.log('tablet loaded');
}
}).listen();
enquire.register("screen and (min-width: 900px)", {
match : function() {
// Load a desktop JS file
loadJS('desktop.js');
//console.log('desktop loaded');
}
}).listen();
</script>
把它们放在一起
使用从外部文件加载 enquire.js 的简单 HTML 页面：
<html>
<head>
<script type="text/javascript" src="/enquire.js"></script>
<script type="text/javascript">
// This loads JS files in the head element
function loadJS(url)
{
// adding the script tag to the head
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// fire the loading
head.appendChild(script);
}
</script>
<style>
body {
font-family: arial;
}
h1 {
font-size: 50pt;
}
#mobile {
display: none;
}
#tablet {
display: none;
}
#desktop {
display: none;
}
@media screen and (max-width: 599px) {
#mobile {
display: block;
}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
#tablet {
display: block;
}
}
@media screen and (min-width: 900px) {
#desktop {
display: block;
}
}
</style>
</head>
<body>
<div id="desktop">
<h1>Desktop</h1>
</div>
<div id="tablet">
<h1>Tablet</h1>
</div>
<div id="mobile">
<h1>Mobile</h1>
</div>
<script type="text/javascript">
enquire.register("screen and (max-width: 599px)", {
match : function() {
// Load a JS file
loadJS('mobile.js');
}
}).listen();
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
loadJS('tablet.js');
//console.log('tablet loaded');
}
}).listen();
enquire.register("screen and (min-width: 900px)", {
match : function() {
loadJS('desktop.js');
//console.log('desktop loaded');
}
}).listen();
</script>
</body>
</html>
除了加载 JS 文件之外，您还可以创建一个 CSS 加载器，它会以相同的方式（有条件地）工作，但这违背了在 CSS 中使用 @media 的目的。 enquire.js 的用法说明值得一读，因为它可以做的比我在这里说明的要多得多。
警告： 上面没有使用 jQuery，但您可以利用它提供的一些功能；例如加载脚本 - 或执行您需要的其他功能。