检测视口单元(使用modernizr或normal js)并提供适当的样式表

我实际上有一个问题，我试图解决自3周。我试着测试对大众单元的支持，并在浏览器不支持该单元时提供一个单独的样式表我读了modernizr教程，熟悉modernizr css检测，但测试vh单位(视口相对单位)是我在网上没有找到的东西。

所以基本上是:

场景1:浏览器支持大众单元然后服务样式表a

场景2:浏览器不支持它然后提供样式表b

我发现有一个非核心的检测叫做Modernizr。cssvwunit，但我真的不知道从哪里开始或如何在这种情况下使用。

如果你能帮助我扩展我的知识，那就太好了。此外，如果不是太费力，一个例子，我可以研究将是非常有帮助的。真诚

马库斯

编辑:为什么它只触发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>

如果你看这个教程http://www.developphp.com/view.php?tid=1253你会发现如何用javascript改变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>

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

另一个选择是在Modernizr中勾选"Add CSS Classes"。通过这种方式，类被添加到html元素中。

<html class="no-cssvhunit">

然后在你的CSS中这样做:

.fullscreen {
    height: 100vh;
}
.no-cssvhunit .fullscreen {
    height: 100%;
}

相关内容

最新更新

热门标签：