媒体查询

媒体特性常用写法：

max-width 最大宽度数值为最大值，则从大到小

min-width 最小宽度数值为最大值，则从小到大

/* 视口宽度小于等于767px， 网页背景色是灰色 #999 */
@media (max-width:767px) {
    body {
        background-color:#999;
    }
}
    

/* 视口宽度大于等于768px 小于等于991px， 网页背景色是天蓝色 #6cf */
@media (min-width:768px) and (max-width:991px) {
     body {
        background-color: #6cf;
     }
}

/* 当有两种样式需求，用 and 来分隔 注：前后必须要有空格 */

/* 视口宽度大于等于992px 小于等于1199px， 网页背景色是绿色 #0a0 */
@media (min-width:992px) and (max-width:1199px) {
      body {
        background-color: #0a0;
     }
}

/* 视口宽度大于等于1200px， 网页背景色是橙色 orange */
@media (min-width:1200px) {
      body {
        background-color: orange;
     }
}

市面上的屏幕有很多，我们不太可能针对每一种都去设置样式，只能将其分成四个区间，在限定的某个区间内设定某些样式

媒体特征

BootStrap

前端 UI框架

用于开发响应式布局，在屏幕放大或缩小同时兼容移动端和pc端，移动设备优先的WEB项目

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

container 版心样式默认居中，会随着屏幕的宽度变化而变化，自带左右15px的内边距

contaniner-fluid 宽度100%，自带左右各15px的内边距

row类作用是抵消container类的15px的内边距，row有-15的外边距

栅格系统的原理：媒体查询配合浮动百分比实现的

案例：

/* 书写 响应式布局容器 */
<div class="container">
    /* 书写行 row 去掉左右的内边距 */
    <div class="row">
        /* 再书写每一个小栅格 */
        /* 中等屏幕 大屏幕 一行显示4个div
           小屏幕 一行显示2个div
           极小屏幕 一行显示1个div  */
        /* 一行显示4个 1个div占3份
           一行显示2个 1个div占6份
           一行显示1个 1个div独占12份 */
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>
    </div>
</div>

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

组件

Bootstrap 自带了大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等

复制我们需要的样式，包含了html结构和css样式，修改成我们所需的样式

媒体查询/BootStrap框架

媒体查询

媒体特征

BootStrap

栅格系统

响应式工具

组件