响应式布局

响应式布局即一个页面可以兼容多种终端设备

说白了就是页面随着屏幕尺寸的改变来自适应

移动Web开发与响应式布局相比较：
- 域名以 m. 开头
- 移动Web开发只适配于移动设备
- 一般采用百分比布局
- 一般是在已有PC端页面的基础上扩充
- 多采用通栏
- 较响应式布局来说开发成本低
屏幕尺寸

|尺寸|设备|
|———|——–|
| < 768px |超小屏幕|
|768px — 992px |小屏幕|
|992px — 1200px |中等屏幕|
| > 1200px |宽屏幕|

Media Query（媒介查询）

响应式布局原理

.container {
        width: 100%;
        height: 300px;
        background-color: pink;         
    }
// 指定它用来查询屏幕
@media screen and (min-width: 768px) {
    .container {
        background-color: red;
    }
}
@media screen and (min-width: 992px) {
    .container {
        background-color: blue;
    }
}
@media screen and (min-width: 1200px) {
    .container {
        background-color: green;
    }
}

/* 显示效果 */
< 768px        显示为 pink
768px - 992px  显示为 red
992px - 1200px 显示为 blue
> 1200px       显示为 green

Bootstrap常用样式

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架

用于开发响应式布局、移动设备优先的 Web 项目

container类
- 用于定义一个固定宽度且居中的版心

<div class="container">
  <!--
    此处的代码会显示在一个固定宽度且居中的容器中
    该容器的宽度会跟随屏幕的变化而变化
  -->
</div>

栅栏系统
- Bootstrap中定义了一套响应式的网格系统
- 其使用方式就是将一个容器划分成12等份
- 然后通过col-xx-xx的类名控制每一列的比例
row类
- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
- 通过“行（row）”在水平方向创建一组“列（column）”
- row类的一个作用就是通过左右margin:0 -15px;屏蔽掉container类的padding

1
2
3

<div class="container">
  <div class="row"></div>
</div>

col-xx-xx类
- col-md-offset-[偏移列数] 类（列偏移）

列数	显示屏幕尺寸	-
col-xs-[列数]：	自适应	在超小屏幕下及以上展示几份
col-sm-[列数]：	> = 768	在小屏幕下及以上展示几份
col-md-[列数]：	> = 992	在中等屏幕下及以上展示几份
col-lg-[列数]：	> = 1200	在大屏幕下及以上展示几份

Bootstrap中国官网：http://www.bootcss.com/