CSS3新增长度单位
rem
:根元素字体的倍数,只与根元素字体大小有关;vw
:占视口宽度的百分比;vh
:占视口高度的百分比;vmax
:占视口中宽和高最大的百分比;vmin
:占视口中宽和高最小的百分比。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3新增长度单位</title>
<style>
.d1 {
height: 10rem;
width: 10rem;
background-color: antiquewhite;
margin: 0 auto;
margin-top: 10px;
}
.d2 {
height: 10vh;
width: 10vw;
background-color: greenyellow;
margin: 0 auto;
margin-top: 10px;
}
.d3 {
height: 10vmax;
width: 10vmin;
background-color: rosybrown;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>