高度自适应使用padding 或 padding-bottom + 百分比来实现；
宽度自适应使用width + 百分比来实现。
下面是实现九宫格自适应的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css01-九宫格</title>
<style>
* { padding: 0; margin: 0; }
.main {
background-color: #fff;
90%;
padding-bottom: 90%;
}
/* .clearfix:after{
visibility: hidden;
display: inline-block;
content: "";
height: 0;
clear: both;
*zoom: 1;
} */
.main>div {
26%;
padding-bottom: 26%;
border: 1% solid #fff;
background-color: #E78326;
border-radius: 3%;
float: left;
margin: 1%;
}
</style>
</head>
<body>
<div class="main clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</div>
</body>
</html>