响应式布局

响应式布局即一个页面可以兼容多种终端设备
说白了就是页面随着屏幕尺寸的改变来自适应

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

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

Media Query（媒介查询）

响应式布局原理

css

.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类
- 用于定义一个固定宽度且居中的版心

html

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

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

html

<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/

响应式布局 ​

Media Query（媒介查询） ​

Bootstrap 常用样式 ​

响应式布局

Media Query（媒介查询）

Bootstrap 常用样式