4：响应式布局
1.0 响应式开发原理 1.1 响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备的划分情况：
响应式原理：
<style>.box {height: 100px;background-color: pink;margin: 0 auto;}/* 利用媒体查询，实现响应式尺寸分化 *//* 1,超小屏幕下，小于768 布局容器宽度为100% */@media screen and (min-width: 767px) {.box {width: 100%;}}/* 2，小屏幕下，大于等于768，布局容器改为750px */@media screen and (min-width: 768px) {.box {width: 750px;}}/* 3，中等屏幕下，992以上，布局容器修改为970px */@media screen and (min-width: 992px) {.box {width: 970px;}}/* 大屏幕下 1200以上，布局容器修改1170 */@media screen and (min-width: 1200px) {.box {width: 1170px;}}style>
head><body><div class="box">div>
body>
1.2 响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分
但是我们也可以根据实际情况自己定义划分
2.0 的介绍 2.简介
来自 （推特），是目前最受欢迎的前端框架。 是基于HTML、CSS 和 的，它简洁灵活，使得 Web 开发更加快捷。
中文网 官网 推荐网站
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
2.2 优点 2.3 版本简介
2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善。
3.x.x：目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。
4.x.x：最新版，目前还不是很流行
2.基本使用（此处着重介绍样式库）
使用四步曲：
创建文件夹结构
创建 html 骨架结构
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 101 Templatetitle><link href="css/bootstrap.min.css" rel="stylesheet">head><body><h1>你好，世界！h1><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script><script src="js/bootstrap.min.js">script>body>html>
引入相关样式文件
书写内容
直接拿 预先定义好的样式来使用
修改 原来的样式，注意权重问题
学好 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
2.5 布局容器
需要为页面内容和栅格系统包裹一个 . 或者.-fluid 容器，它提供了两个作此用处的类。
.
.-fluid
2.6 栅格系统
提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
栅格嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .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--* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（）。
<div class="row"><div class="col-lg-4">1div><div class="col-lg-4 col-lg-offset-4">2div>div>
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（）的顺序。
<div class="row"><div class="col-lg-4 col-lg-push-8">左侧div><div class="col-lg-8 col-lg-pull-4">右侧div>div>
响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
响应式工具案例：
<style>.row div {height: 600px;background-color: orange;}.row div:nth-child(3) {background-color: orangered;}span {font-size: 50px;font-weight: 700;}style><title>Documenttitle>
head><body><div class="container"><div class="row"><div class="col-md-3 col-sm-3"><span class="visible-lg">出来吧欧巴span>div><div class="col-md-3 col-sm-3">div><div class="col-md-3 col-sm-3 hidden-md hidden-xs">一言不合就隐藏div><div class="col-md-3 col-sm-3">div>div>div>
body>
3.0 阿里百秀案例制作 3.1 技术选型
方案：我们采取响应式页面开发方案
技术：框架
设计图： 本设计图采用 设计尺寸
项目结构搭建
使用四步曲：
创建文件夹结构创建 html 骨架结构引入相关样式文件书写内容
宽度修改
因为本效果图采取 1280的宽度， 而 里面 宽度 最大为 ，因此我们需要手动改下宽度
/* 利用媒体查询修改 container宽度适合效果图宽度 */@media (min-width: 1280px) { .container { width: 1280px; } }
总结：
可以先把pc端页面制作好（最大的宽度），然后修改移动端布局（逐级修改）。响应式开发核心点：事先准备一些元素，在特定屏幕下实现显示与隐藏，或者改变样式
奥利给
