css中正常设置元素大小时，元素使用的单位是px元素，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.test{
width: 10px;
height: 10px;
}
</style>
<body>
<div class="test" ></div>
</body>
</html>
image.png
----------------------------------------------------华丽的分割线---------------------------------------------------------------
在响应式页面里则经常设置成为vh和vw。vw代表相对于视窗大小的平均分配为100份；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{
border: 0px;
padding: 0px;
margin: 0px;
}
body{
background-color: #FFF3F3;
}
.test{
width: 90vw;
height: 90vh;
background-color: #0000FF;
}
.test1{
width: 50vw;
height: 50vh;
background-color: #FF0000;
}
</style>
<body>
<div class="test" >
<div class="test1" ></div>
</div>
</body>
☐ </html>
相对于红框内的高度，不受父元素影响。
image.png
----------------------------------------------------华丽的分割线---------------------------------------------------------------
也可使用rem，rem是以HTML元素的font-size为基准平均分配。以chrome为例子，默认为16px，1rem代表16px；
image.png
----------------------------------------------------华丽的分割线---------------------------------------------------------------
网友评论