3

我实际上有一个问题，我试图从 3 周开始解决。我试图测试对 vw 单元的支持并在浏览器不支持该单元时提供单独的样式表.

所以基本上：

场景 1：浏览器支持 vw 单元然后提供样式表 A。

场景 2：浏览器不支持它然后提供样式表 B。

我确实发现有一个名为 Modernizr.cssvwunit 的非核心检测，但老实说，我不知道从哪里开始或如何在这种情况下使用。

如果你能帮助我扩展我的知识，那就太好了。此外，如果不是太费力的话，一个带有我可以学习的例子的 jsfiddle 会非常有帮助。

真挚地，

马库斯

编辑：为什么它只触发 else 语句？ http://jsfiddle.net/5saCL/10

<script>
  if (Modernizr.cssvwunit) {
    alert("This browser supports VW Units!");
  } else {
    alert("This browser does not support VW Units!");
  }
</script>
4

2 回答 2

5

如果您查看本教程http://www.developphp.com/view.php?tid=1253，您将了解如何使用 JavasSript 更改 CSS 样式。

您只需要编辑一点脚本以满足您的要求：

<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
  if (Modernizr.cssvwunit) {
    document.getElementById('pagestyle').setAttribute('href', "styleVW.css");
  } else {
    document.getElementById('pagestyle').setAttribute('href', "style.css");
  }
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<!-- no buttons needed -->
</body>
</html>

这应该有效。

于 2014-06-08T16:01:52.947 回答
1

您确定要加载两个不同的样式表吗？

另一种选择是检查 Modernizr 中的“添加 CSS 类”。通过这种方式，类被添加到 html 元素中。

<html class="no-cssvhunit">

然后在您的 CSS 中执行此操作：

.fullscreen {
    height: 100vh;
}

.no-cssvhunit .fullscreen {
    height: 100%;
}
于 2015-02-05T16:58:25.543 回答