响应式设计

Posted 2020-11-02 BarneyWhite

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>