Html Safari CSS 规则 vh-units？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23212807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Safari CSS rule vh-units?
提问by Schneider
Does anybody know if there is a fix for Safari vh rule?
有人知道Safari vh规则是否有修复吗？
#what{
min-height:70vh;
}
All working ok, in all browsers, but only in Safari it is not recognized? Is there a fix for safari, that we can use VH rule in css?
一切正常，在所有浏览器中，但仅在 Safari 中无法识别？safari 是否有修复，我们可以在 css 中使用 VH 规则？
回答by Andrej Ilic
Instead of Vw/Vh, use rem with this JavaScript. The "run code snippet" might create confusion, cause its window "resizes" by zooming. To test this, just copy this code into some html file and run it in Safari and other browsers (or see "Full Page").
在此 JavaScript 中使用 rem 而不是 Vw/Vh。“运行代码片段”可能会造成混淆，导致其窗口通过缩放来“调整大小”。要对此进行测试，只需将此代码复制到某个 html 文件中，然后在 Safari 和其他浏览器中运行它（或参阅“完整页面”）。
<!DOCTYPE html>
<head>
<script language="javascript" type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = clientWidth + 'px';
docEl.style.display = "none";
docEl.clientWidth; // Force relayout - important to new Android devices
docEl.style.display = "";
};
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
// Test rem support
var div = doc.createElement('div');
div.setAttribute('style', 'font-size: 1rem');
// Abort if browser does not recognize rem
if (div.style.fontSize != "1rem") return;
win.addEventListener('resize', recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<style>
@charset "utf-8";
*{padding: 0;margin: 0;}
div {position:fixed;width:40%;height:30%;background-color:yellow;color:blue;font-size:0.02rem;}
</style>
</head>
<body>
<div>in this case 0.01 rem == 1vw . You need to remove body margins.</div>
</body>
</html>For more explenation, see this article that I ve found. http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing
有关更多说明，请参阅我发现的这篇文章。 http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing
回答by margarita
Depending on your code, you can use this trick:
根据您的代码，您可以使用以下技巧：
in front of vh value use % or em, or pixels, so that the browsers that do not support it take the value:
在 vh 值前面使用 % 或 em，或像素，以便不支持它的浏览器取值：
.this{
width: 100%;
width: 100vw;
height: 100%;
height: 100vh;
}
