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

1.0 响应式开发原理

1.1 响应式开发原理

1.2 响应式布局容器

2.0 bootstrap的介绍

2.1Bootstrap简介

2.2 bootstrap优点

2.3 版本简介

2.4bootstrap基本使⽤

2.5 bootstrap布局容器

.container

.container-fluid

2.6 bootstrap栅格系统

栅格嵌套

响应式⼯具

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

1.0 响应式开发原理

1.1 响应式开发原理

就是使⽤媒体查询针对不同宽度的设备进⾏布局和样式的设置，从⽽适配不同设备的⽬的。设备的划分情况：

⼩于768的为超⼩屏幕（⼿机）
768~992之间的为⼩屏设备（平板）
992~1200的中等屏幕（桌⾯显示器）
⼤于1200的宽屏设备（⼤桌⾯显示器）

1.2 响应式布局容器

响应式需要⼀个⽗级做为布局容器，来配合⼦级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的⼤⼩，再改变⾥⾯⼦元素的排列⽅式和⼤⼩，从⽽实现不同屏幕下，看到不同的⻚⾯布局和样式变化。⽗容器版⼼的尺⼨划分

超⼩屏幕（⼿机，⼩于 768px）：设置宽度为 100%
⼩屏幕（平板，⼤于等于 768px）：设置宽度为 750px
中等屏幕（桌⾯显示器，⼤于等于 992px）：宽度设置为 970px
⼤屏幕（⼤桌⾯显示器，⼤于等于 1200px）：宽度设置为 1170px

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

2.0 bootstrap的介绍

2.1Bootstrap简介

Bootstrap 来⾃ Twitter（推特），是⽬前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 中⽂⽹官⽹推荐⽹站 框架：顾名思义就是⼀套架构，它有⼀套⽐较完整的⽹⻚功能解决⽅案，⽽且控制权在框架本身，有预制样式库、组件和插件。使⽤者要按照框架所规定的某种规范进⾏开发。

2.2 bootstrap优点

标准化的html+css编码规范
提供了⼀套简洁、直观、强悍的组件
有⾃⼰的⽣态圈，不断的更新迭代
让开发更简单，提⾼了开发的效率

2.3 版本简介

2.x.x：停⽌维护,兼容性好,代码不够简洁，功能不够完善。
3.x.x：⽬前使⽤最多,稳定,但是放弃了IE6-IE7。对 IE8 ⽀持但是界⾯效果不好,偏向⽤于开发响应式布局、移动设备优先的WEB 项⽬。
4.x.x：最新版，⽬前还不是很流⾏

2.4bootstrap基本使⽤

在现阶段我们还没有接触JS相关课程，所以我们只考虑使⽤它的样式库。 Bootstrap 使⽤四步曲：

创建⽂件夹结构

创建 html ⻣架结构

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible"
content="IE=edge"><meta name="viewport" content="width=devicewidth, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前⾯，任何其他内容都*必 须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="css/bootstrap.min.css"
rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support
of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you
view the page via file:// --><!--[if lt IE 9]><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><![endif]--></head><body><h1>你好，世界！</h1><!-- jQuery (necessary for Bootstrap's
JavaScript plugins) --><script
src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">
</script><!-- Include all compiled plugins (below), or
include individual files as needed --><script src="js/bootstrap.min.js"></script></body>
</html>

引⼊相关样式⽂件

<!-- Bootstrap 核⼼样式-->
<link rel="stylesheet"
href="bootstrap/css/bootstrap.min.css">

书写内容

直接拿Bootstrap 预先定义好的样式来使⽤修改Bootstrap 原来的样式，注意权重问题学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

2.5 bootstrap布局容器

Bootstrap 需要为⻚⾯内容和栅格系统包裹⼀个 .container 或者.container-fluid 容器，它提供了两个作此⽤处的类。

.container

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

.container-fluid

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

2.6 bootstrap栅格系统

Bootstrap提供了⼀套响应式、移动设备优先的流式栅格系统，随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建⻚⾯布局，你的内容就可以放⼊这些创建好的布局中。

按照不同屏幕划分为1~12 等份
⾏（row）可以去除⽗容器作⽤15px的边距
xs-extra small：超⼩； sm-small：⼩； md-medium：中等； lg-large：⼤；
列（column）⼤于 12，多余的“列（column）”所在的元素将被作为⼀个整体另起⼀⾏排列
每⼀列默认有左右15像素的 padding
可以同时为⼀列指定多个设备的类名，以便划分不同份数例如 class="colmd-4 col-sm-6"

栅格嵌套

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

<!-- 列嵌套 --><div class="col-sm-4"><div class="row"><div class="col-sm-6">⼩列</div><div class="col-sm-6">⼩列</div></div>
</div>

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

<!-- 列偏移 --><div class="row"><div class="col-lg-4">1</div><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>

响应式⼯具

为了加快对移动设备友好的⻚⾯开发⼯作，利⽤媒体查询功能，并使⽤这些⼯具类可以⽅便的针对不同设备展示或隐藏⻚⾯内容。