前端常用開發單位-vw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-前端開發常用單位-vwvh</title>
<style>
*{
margin: 0;
padding: 0;
}
/*div{*/
/* width: 10vmin;*/
/* height: 10vmax;*/
/* background: red;*/
/*}*/
div{
width:1vw;
height: 1vh;
background: red;
}
</style>
</head>
<body>
<div></div>
<script>
/*
1.什么是vw(Viewport Width)和vh(Viewport Height)?
1.1vw和vh是前端開發中的一個動態單位, 是一個相對於網頁視口的單位
1.2系統會將視口的寬度和高度分為100份,1vw就占用視口寬度的百分之一, 1vh就占用視口高度的百分之一
1.3vw和vh和百分比不同的是, 百分比永遠都是以父元素作為參考
而vw和vh永遠都是以視口作為參考
結論: vw/vh是一個動態的單位, 會隨着視口大小的變化而變化(相對單位)
2.什么是vmin和vmax?
vmin: vw和vh中較小的那個
vmax: vw和vh中較大的那個
使用場景: 保證移動開發中屏幕旋轉之后尺寸不變
* */
console.log(window.innerWidth, window.innerHeight);
let oDiv = document.querySelector("div");
console.log(getComputedStyle(oDiv).width);
console.log(getComputedStyle(oDiv).height);
</script>
</body>
</html>
效果:
