响应式设计

1 <meta name = "viewport" content="width = device-width,initial-scale=1.0">

1 <style>
2     img{
3         height:auto;
4         width:auto;
5         max-height:100%;
6         max-width:100%;
7     }
8 </style>

1 background-size:cover
2 background-size:contain

1 <div></div>
2 <style>
3     div{
4         height:0;
5         padding-top:50%;
6         background:#f99;
7     }
8 </style>

 1 <ul class="contain">
 2   <li class="list"></li>
 3   <li class="list"></li>
 4   <li class="list"></li>
 5   <li class="list"></li>
 6   <li class="list"></li>
 7   <li class="list"></li>
 8   <li class="list"></li>
 9   <li class="list"></li>
10   <li class="list"></li>
11 </ul>

 1 <style>
 2 .contain{
 3   margin:0;
 4   padding:0;
 5   text-align:center;
 6   }
 7 .list{
 8   display:inline-block;
 9   width:30%; /*每行放下的数目固定*/
10   height:0;
11   padding-top:20%;
12   margin-bottom:10px;
13   background:#f99;
14 }
15 </style>

 1 .contain{
 2   margin:0;
 3   padding:0;
 4   display:flex;
 5   flex-wrap:wrap;
 6   }
 7 .list{
 8   display:inline-block;
 9   width:70px;
10   height:50px;
11   margin: 0 10px 10px 0;
12   background:#f99;
13 }

 1 <style>
 2 .contain{
 3   margin:0;
 4   padding:0;
 5   display:flex;
 6   flex-wrap:wrap;
 7   }
 8 .list{
 9   display:inline-block;
10   width:70px;
11   height:50px;
12   /* padding-top:20%; */
13   margin: 0 10px 10px 0;
14   background:#f99;
15 }
16 /*当宽度<= 1000px的时候采用这个布局*/
17 @media screen and (max-width:1000px){
18  .contain{
19   margin:0;
20   padding:0;
21   text-align:justify;
22   }
23 .list{
24   display:inline-block;
25   width:30%; 
26   height:0;
27   padding-top:20%;
28   margin-bottom:10px;
29   background:#f99;
30 }
31 </style>