1 .container{padding:0 15px; margin:0 auto;}
2 .container:before{
3 content: '';
4 display: table;/*防止第一个子元素margin-top越界*/
5 }
6 .container:after{
7 content:"";
8 display:table;/*防止最后個子元素margin-bottom越界*/
9 clear:both;/*清楚子元素浮动的影响*/
10 }
11
12 /*超大PC屏幕下的专用样式*/
13 @media screen and (min-width:1200px) {
14 .container{ width:1170px;}
15 .my-img{width:25%}
16 }
17 /*中等PC屏幕下的专用样式*/
18 @media screen and (min-width:992px) and (max-width: 1199px) {
19 .container{width:970px;}
20 .my-img{width:25%}
21 }
22 /*PAD屏幕下的专用样式*/
23 @media screen and (min-width: 768px) and (max-width:991px ){
24 .container{width:750px;}
25 .my-img{width:50%}
26 }
27 /*PHONE屏幕下的专用样式*/
28 @media screen and (min-width:767px) {
29 .container{ width:100%;}
30 .my-img{ width:100%;}
31 }
