请问有人知道是否有修复Safari vh规则的方法吗?
#what{
min-height:70vh;
}
所有浏览器都正常工作,但只有Safari不能识别?是否有解决Safari问题的方法,可在CSS中使用VH规则?
请问有人知道是否有修复Safari vh规则的方法吗?
#what{
min-height:70vh;
}
所有浏览器都正常工作,但只有Safari不能识别?是否有解决Safari问题的方法,可在CSS中使用VH规则?
使用rem代替Vw/Vh,结合JavaScript使用。"运行代码片段"可能会造成困惑,因为它的窗口通过缩放来"调整大小"。要测试这个,请将此代码复制到某个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>
如需更多解释,请参阅我找到的这篇文章。 http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing
.this{
width: 100%;
width: 100vw;
height: 100%;
height: 100vh;
}