Bootstrap 响应式 媒体查询_bootstrap响应式媒体查询

1、@media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

2、如果文档宽度小于等于 1200px 像素（宽度）则修改class为“aaa”的字体大小( font-size):

 @media only screen and (max-width: 1200px) {            ----- screen：用于电脑屏幕，平板电脑，智能手机等。
            .aaa{ 
               font-size:25px;
            }
        }

3、如果文档宽度大于 等于1200px 像素（宽度）则修改class为“aaa”的字体大小( font-size):

@media only screen and (min-width: 1200px) {            ----- 表示最小是1200也就是>=1200
            .aaa{
               font-size:25px;
            }
        }

   注意：    注意下顺序：

      @media (min-width: 1200){ //>=1200的设备 }     

      @media (min-width: 900px){ //>=900的设备 }

      @media (min-width: 768px)

      因为如果是1380,由于1380>768那么你的1200就会失效。 所以用min-width时，小的放上面大的在下面。

      同理：如果是用max-width那么就是大的在上面，小的在下面

      @media (max-width: 1199){ //<=1199的设备 }

      @media (max-width: 900px){ //<=991的设备 }     

      @media (max-width: 767px)

      注：学习CSS3 @media 查询可以借鉴：http://www.runoob.com/cssref/css3-pr-mediaquery.html，有相关媒体类型。

             学习Bootstrap可以借鉴：http://www.runoob.com/bootstrap/bootstrap-css-overview.html，有相关Bootstrap 教程。

             学习脚手架借鉴:https://v2.bootcss.com/scaffolding.html，有相关Bootstrap建立在12列栅格系统、布局、组件的教程。