响应式布局

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

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

• 移动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

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

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

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