我有两个样式表:
<link rel="stylesheet" type="text/css" href="/core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/core-desktop.css" media="only screen and (min-width: 800px)" id="css-desktop" />
仅当窗口为 800 像素或更宽时才加载第二个(较窄的显示可以获得更适合移动设备的布局)。
JavaScript 需要知道是否正在应用第二个样式表，我已经尝试过 jQuery:
($(window).width() > 800)
但是当您达到 790 - 810px 宽度时，Chrome/Firefox(可能还有其他)将返回一个值，例如 791，并且仍然会加载 800px+ 样式表。
我怀疑这是由于滚动条造成的(但定位 $(document) 或 $('html') 要么不起作用，要么是相同的)。
那么有没有办法测试 $('#css-desktop') 是否启用/事件/使用？
最佳答案
您可以执行以下操作。
- 在第一个样式表中创建一个具有
display: none;的 div，因此不会显示它。 - 在第二个样式表中，您将添加一个
position:absolute - 在 Javascript 中检查
if( $("#thediv").css("position") == "absolute")
position:absolute;仅应用于第二个样式表。
关于JavaScript 测试 CSS 样式表是否与 CSS3 媒体查询一起应用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8201030/