Bootstrap-媒体查询-屏幕大小

 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-1200px) {
14     .container{ 1170px;}
15     .my-img{25%}
16 }
17 /*中等PC屏幕下的专用样式*/
18 @media screen and (min-992px) and (max- 1199px) {
19     .container{970px;}
20     .my-img{25%}
21 }
22 /*PAD屏幕下的专用样式*/
23 @media screen and (min- 768px) and (max-991px ){
24     .container{750px;}
25     .my-img{50%}
26 }
27 /*PHONE屏幕下的专用样式*/
28 @media screen and (min-767px) {
29     .container{ 100%;}
30     .my-img{  100%;}
31 }