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
marginpadding的值是百分比的时候是相对父元素的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 70px; 10 height:50px; 11 margin: 0 10px 10px 0; 12 background:#f99; 13 }
针对不同的屏幕，应用不同的样式。
可以查询的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-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>