<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vh 单位</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
font-size: 8vh;
border: 1px green solid;
}
</style>
</head>
<body>
<div onclick="ddd(event)">
div
</div>
<span></span>
<span></span>
<span></span>
<script type="text/javascript">
setInterval(function() {
// 拿到div 的高度
var divh = document.getElementsByTagName('div')[0].scrollHeight;
//
var divw = document.getElementsByTagName('div')[0].scrollWidth;
// console.log(typeof divh);
var w = '当前窗口的宽度为' + window.innerWidth;
var h = '，当前窗口的高度为' + window.innerHeight;
// console.log(typeof window.innerHeight);
document.getElementsByTagName('span')[0].innerHTML = w +h + ', ' + divh;
// console.log(parseFloat(divh));
// console.log(h);
document.getElementsByTagName('span')[1].innerHTML = '<br> (div高 / 窗口总高度) = ' + (divh/window.innerHeight);
document.getElementsByTagName('span')[2].innerHTML = '<br> (div宽 / 窗口总宽度) = ' + (divw/window.innerWidth);
},0)
</script>
</body>
</html>