響應式設計

viewport

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

保持寬高比

margin\padding的值是百分比的時候是相對父元素的width

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>

inline-block+justify：每行放下的數目固定

 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>

flex：寬高度固定，能放幾個就放幾個

 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 }

media query

針對不一樣的屏幕，應用不一樣的樣式。

能夠查詢的media

• width height

• device-width device-height

• device-pixel-ratio 像素比

• orientation

 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>