前端入门系列--移动web开发响应式布局

我们前面所写的布局都是移动端单独开发的，但是若我们想同一个页面当检测到不同设备（屏幕大小不同时），自动修改布局样式呢？
–这就是响应式布局（使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的）

一般来说，针对不同屏幕大小版心设置如下：

• 超小屏幕（手机，小于 768px）：设置宽度为 100%
• 小屏幕（平板，大于等于 768px）：设置宽度为 750px
• 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
• 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
  
  

利用bootstrap进行响应式开发

1、bootstrap的简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架（框架顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。）。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。


其具有以下优点：

• 标准化的html+css编码规范
• 提供了一套简洁、直观、强悍的组件
• 有自己的生态圈，不断的更新迭代
• 让开发更简单，提高了开发的效率
• 使用bootstrap框架时不需引入normaliz.css文件
  
  

2、bootstrap的使用

下载好bootstrap解压后得到的文件夹将其copy到自己项目的文件夹中；
在html中引入支持以及css文件：

 <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

 <link href="css/bootstrap.min.css" rel="stylesheet">

bootstrap有很多的ui组件，当想拿其来用时，直接copy官网相应语句，或者自己写的盒子想引用其样式，直接将该盒子类名赋为与文档说明中的一样即可；若想在该基础上对样式修改，则给该盒子多一个类名，给该类名写样式，但是注意权重问题，一般使用important进行提权；

3、bootstrap的布局容器

bootstrap提供了两个页面容器：
container类：用于进行响应式开发

• 响应式布局的容器 固定宽度
• 大屏 ( >=1200px) 宽度定为 1170px
• 中屏 ( >=992px) 宽度定为 970px
• 小屏 ( >=768px) 宽度定为 750px
• 超小屏 (100%)

但注意不是响应式布局就全都用container类，比如通栏就不需要放在container中；
且container最大宽度为1170排序，当美工给的图最大宽度超过时必须进行重新设置，比如当效果图是1280px时：

 /* 利用媒体查询修改 container宽度适合效果图宽度  */
  @media (min-width: 1280px) { 
    .container { 
	width: 1280px; 
     } 
   }

container-fluid类：用于进行单独移动端开发

• 流式布局容器 百分百宽度
• 占据全部视口（viewport）的容器

4、bootstrap栅格系统

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


栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

• 按照不同屏幕划分为1~12 等份
• 行（row） 可以去除父容器作用15px的边距(后面嵌套时为去掉父元素padding常用)
• xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；举例如下
• 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15像素的 padding
• 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6”
  
  

此外，栅格系统还可以嵌套：

 <div class="col-sm-4">
 //这里用多一个row来消除padding
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

注意嵌套中如果想要边距不能用margin，只能给父盒子padding，否则盒子可能会掉下来；


列偏移：
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）：

  <div class="row">
      <div class="col-lg-4">1</div>
      //下面盒子向右移了4个栅格的距离
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>

可利用该属性将盒子分别写到左右两边或者居中对齐；


列排序：
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序，如：

  <div class="row">
      <div class="col-lg-4 col-lg-push-8">左侧</div>
      <div class="col-lg-8 col-lg-pull-4">右侧</div>
  </div>

push是将该列右移的份数，而pull是将该列左移的份数；

注意列偏移与列排序的区别：
1、列偏移只能向右，列排序可以左右；
2、列偏移超出容器会换行，列排序超出部分会隐藏

显示与隐藏：

也是在在相应的盒子上加上该类名，而显示则是visible-xs…类似

4、其它注意点

1、和之前将的背景图片需要设置rem一样，放在父盒子中的图片设置宽度为100%，只要父盒子是自动改变大小的，则图片也随之自动变化；
2、我们之前清除浮动有很多方法，如给父盒子添加overflow：hidden，现在多一种方法：给需清除浮动的盒子一个clearfix的类名：