移动WEB开发之响应式布局

1.响应式开发

     响应式开发原理：使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同的设备的目的。

设备划分	尺寸区间	设置宽度
超小屏幕（手机）	<768px	100%
小屏 设备（平板）	>=768px ~ <992px	750px
中等屏幕（桌面显示器）	>=992px ~ <1200px	970px
宽屏设备（大桌面显示器）	>= 1200px	1170px

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

2.Bookstrap 前端开发框架

     Bookstrap来自Twitter（推特），是目前最受欢迎的前端框架。Bookstrap是基于HTML,CSS,JACASCRIPT的，他简洁灵活，使得Web开发更加快捷。

网站：http://getbootstrap.com/ 

优点：1.标准化的html+css编码规范

           2.提供了一套简洁，直观，强悍的组件

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

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

Bootstrap 使用四部曲：1创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容

布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container

它提供了两个做此用处的类

1.container类

 响应式布局容器 固体宽度  （container直接定义好了不同设备的不同宽度 所以不用再写媒体查询了）

*container有一个左右15的内边距

2.container-fluid类

 流式布局容器 百分百宽度

占据全部视口（viewport）的容器，适用于单独移动端开发

2.Bookstrap 栅格系统

 栅格系统：它是指将页面布局划分成等宽的例，通过列数的定义来模块化页面布局

Bookstrap 栅格系统 系统自动分为12列

使用：

	超小屏幕（手机） <768px	小屏设备（平板） >=768px	中等屏幕（桌面显示器） >=992px	宽屏设备（大桌面显示屏） >=1200px
.container 最大宽度	自动（100%）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）	12列

           1.行（row）必须放到container布局容器里面

           2.实现列的平均划分，需要给列添加类前缀

           3.xs-extra-small：超小；sm-small：小；md-medium：中等；lg-large：大；

           4.列（column）大于12，多余的“列（column）”所在的元素被作为一个整体另起一行排列

           5.每一列默认有左右15像素的padding

           6.可以同时为一列指定多个设备的类名，以便划分不同份数，例如 class="col-md-4 col-sm-6"

列嵌套：列嵌套的时候加一个row的div 可以去掉父级padding值，高度和父亲一样高

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

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

响应式工具

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

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

与之相反的，是visible-xs visible-md visible-lg 是显示某个页面内容