移动端WEB开发之响应式布局

1  响应式开发原理

1.1  响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备的划分情况：

（1）小于768的为超小屏幕（手机）

（2）768-992之间为小屏设备（平板）

（3）992-1200的中等屏幕（桌面显示器）

（4）大于1200的宽度设备（大桌面显示器）

1.2  响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分：

超小屏幕（手机，小于768px）：设置宽度为100%

小屏幕（平板，大于等于768px）：设置宽度为750px

中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px

大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px

但是我们也可以根据实际情况自己定义划分

2  bootstrap的介绍

2.1  bootstrap简介

Bootstrap来自twitter（维持），是目前最受欢迎的前端框架。Bootstrap是基于html,css和javascript的，它简洁灵活，使得web开发更加便捷。

框架：顾名思义就是一套框架，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规定的某种规范进行开发。

2.2  bootstrap优点

（1）标准化的html+css编码规范

（2）提供了一套简介、直观、强悍的组件

（3）有自己的生态圈，不断的更新迭代

（4）让开发更简单，提高了开发的效率

2.3  版本简介

2.×.×：停止维护，兼容性好，代码不够简洁，功能不都完善。

3.×.×：目前使用最多，稳定，但是放弃了IE6-IE7.对IE8支持但是界面效果不好，偏向用于开发响应式布局、移动设备优先的WEB项目。

4.×.×：最新版，目前还不是很流行。

2.4  bootstrap基本使用

在现阶段我们还没有接触JS相关课程，所以我们只考虑使用他的样式库。

Bootstrap使用四部曲：

（1）创建文件夹结构

（2）创建html骨架结构

（3）引入相关样式文件

（4）书写内容

2.5  bootstrap布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.containter或者.containter-fluid容器，他提供了两个作此用处的类。

（1）.containter：响应式布局的容器，固定宽度；大屏（>=1200px）宽度定为1170px；中屏（>=992px）宽度定为970px；小屏（>=768px）宽度定为750px；超小屏（100%）

（2）.containter-fluid：流式布局容器，百分百宽度；占据全部视口的容器

2.6 bootstrap栅格系统

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

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

栅格嵌套：栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm*元素但已经存在的.col-sm-*元素内。

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

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

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