bootstrap 的媒体查询

有时候需要对bootstap的样式自定义，比如说某个元素的“height”值，要放在与bootstrap媒体查询同步的样式里，才会兼容响应式布局。

.container类是bootstrap的官方参考样式，照着官方设置的样式去自定义样式，就对了，一个样式要写三份。

@media screen and (min-width: 992px)｛
     .container {
          max-width: 960px;
      }
.自定义类{height: 800px}
｝
   
@media screen and (min-width: 768px) and (max-width: 991px)｛
    .container {
        max-width: 720px;
    }
   .自定义类{height: 600px}
｝

@media screen and (min-width: 576px) and (max-width: 767px)｛
    .container {
        max-width: 540px;
    }


   .自定义类{height: 200px}



｝
 

@media screen and (min-width: 992px){
    /*PC端*/
}

@media screen and (min-width: 768px) and (max-width: 991px){
    /*iPad端*/
}

@media screen and (min-width: 300px) and (max-width: 767px){
    /*手机端*/
}