Bootstrap-媒体查询-屏幕大小

 .container{padding:0 15px; margin:0 auto;}
 .container:before{
     content: '';
     display: table;/*防止第一个子元素margin-top越界*/
     }
 .container:after{
     content:"";
     display:table;/*防止最后個子元素margin-bottom越界*/
     clear:both;/*清楚子元素浮动的影响*/
 }

 /*超大PC屏幕下的专用样式*/
 @media screen and (min-width:1200px) {
     .container{ width:1170px;}
     .my-img{width:25%}
 }
 /*中等PC屏幕下的专用样式*/
 @media screen and (min-width:992px) and (max-width: 1199px) {
     .container{width:970px;}
     .my-img{width:25%}
 }
 /*PAD屏幕下的专用样式*/
 @media screen and (min-width: 768px) and (max-width:991px ){
     .container{width:750px;}
     .my-img{width:50%}
 }
 /*PHONE屏幕下的专用样式*/
 @media screen and (min-width:767px) {
     .container{ width:100%;}
     .my-img{  width:100%;}
 }