一、响应式网页
一个页面，可以根据浏览设备的不同，以及特性的不同，而自动改变布局、大小等
-
响应式网页的三个特征
1）流式网格布局(fluid) 2）可伸缩的图片和字体 3）CSS3 Media Query - 根据客户端浏览设备的特性，有选择的执行部分css -
优缺点
优点：可以自动适配PC/PAD/PHONE浏览器屏幕 缺点：代码变复杂，需要考虑更多兼容性，并不适合内容非常多的网页
二、如何测试响应式网页
1、真实物理设备
优点：测试结构真实可靠
不足：测试任务量太大
2、使用第三方软件
优点：无需添置真实设备
不足：软件测试效率低，部分功能无法测试，测试结果有待进一步验证
3、使用浏览器模拟器测试
优点：测试功能强大，简单易用，
不足：测试结果有待进一步验证
三、响应式布局必须清楚的两个概念
-
viewport - 视口
1) 2010年之前，html网页基本都是为pc设计的，宽度比较大,在手机上的显示内容会挤压到一块，后来iOSiOS引入了viewport(视口)的概念，来优化手机上观看网站的体验 2) iOS引入了viewport(视口)的概念：用于显示网页内容的一个逻辑概念，其高度和宽度都可以任意制定，网页不是显示在物理窗口，而是显示在视口中-就可以实现大网页不经缩放，直接显示手机中，但需要用户来回滑动 3) viewport的用法 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" > viewport 可以指定如下属性： width: 视口的宽度，可以取值为数值，或device-width height：视口的高度，一般不指定 initial-scale：初始时的缩放倍率 minimum-scale : 允许的最小缩放倍率 maximum-scale : 允许的最大缩放倍率 user-scalable : 是否允许用户手动缩放，可取值1/0/yes/no -
CSS3 media query
1) 作用：根据客户端浏览设备的特性，有选择的执行部分css 2) media: 指浏览网页的设备，如screen 3) Query: 查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩、方向(landscape/portrait) 4) css3MediaQuery有两种用法 根据媒体的特性，加载不同的外部css <link media="screen and (min-width:990px) and (max-width:1000px)" rel="stylesheet" type="text/css" href="css/pc.css"/> 不足：客户端会不管媒体特性，请求所有的css文件 根据媒体的特性，执行某段css中的部分内容 @media screen and (min-width: 990px) {} https://wangliguang.github.io/categories/
三、如何编写响应式网页
1. 在head标签中，声明viewport元标签, 使网页的视口和浏览器的宽高保持一致
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
2. 根据浏览器的不同，加载不同的css文件
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="smallScreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="tinyScreen.css" />
3. 同一个css文件中，也根据不同的屏幕分辨率，选择应用不同的css规则
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
4. 注意：
1) 所有元素的宽不能制定固定值，必须使用相对的宽度值
width:"60%" 或者 width:"auto"
2) 字体不能使用绝对大小(px),必须使用相对大小(em)
3) 布局用的各个区块的位置都是浮动的，不是固定不变的
4) 除了布局和文本，还必须实现图片的自动缩放,或者根据客户端屏幕的不同，加载不同尺寸的图片
img {
max-width:100%;
}
四、 Bootstrap
www.bootcss.com
-
是一个html/css/js框架，适用于移动设备优先的响应式网页
V2: 面向PC进行了样式设定，同时兼顾pad和phone V3: 面向Phone进行样式设定，同时兼顾了PC 主要涉及： HTML: 为H5扩展了一些自定义属性 CSS: CSS Reset + 几千个class JS: 基于JQ提供了十几个插件函数 -
bootstrap分为五部分
1. 起步startup 创建一个bootstrap页面，查看对下述标签进行了哪些样式重置 html body h1-h6 a img table ul 2. 全局css样式 global css 1) 按钮 bootstrap中常用的五种颜色 红色->危险 绿色->成功 黄色->警告 浅蓝色->信息 深蓝色->基础的 bootstrap中常用的四个大小 btn-lg -》大 btn-md -》中 btn-sm -》小 btn-xs -》最小 块级按钮 btn-block 调整按钮的位置 pull-right ->右浮动 pull-left ->左浮动 2) 图片 img-rounded 圆角 img-circle 圆形 img-thumbnail 缩略图 img-responsive 图片支持响应式布局 3) 排版和代码，仅作了解 文本颜色: text-danger text-success text-warning text-info text-primary 背景颜色 bg-danger bg-success bg-warning bg-info bg-primary 文本对齐方式 text-left text-right text-center text-justify 文本对齐方式 text-lowercase text-uppercase text-capitalize 4) 列表 list-unstyle 去掉列表项样式 list-inline 将所有元素放在同一行 5) 表格 bootlint是一个js，由bootstrap官方提供，用于检测使用bootstrap的页面中场景的html错误，class使用方面的错误-默认请求下浏览器检查不出来的 table table-bordered 带边框的 table-responsive 响应式表格，注意，使用在table的父元素上，而不是table上 table-striped 隔行变色的表格 table-hover 带悬停效果的表格 6) 栅格布局系统 7) 表单 组件commponent
插件plugin
定制customize
总结：
1. 响应式布局就是bootstrap
错的，使用bootstrap是为了更加简单的做响应式页面
2. viewport,是一个逻辑概念，可以设置宽高，用于显示页面
3. css Media query 根据不同的情况使用不同的css样式
4. 自己做响应式页面
1) 设置viewport宽=device-width
2) 使用css3 media query加载样式
3) 注意点
浮动 字体设置相对的 width相对的 img-》max-width:100%
5. bootstrap做响应式
1. ie兼容
2. 设置viewport
3. 导入关键css文件
css reset + 上千个类
4. 使用css hack 让低版本ie兼容html5新标签和cssmediaquery
5. 给元素设置类
6. 导入bootstrap的关键js文件
查看bootstrap中对h1-h6，img, body的重置样式
五、 案例展示
cssmediaquery在一个css文件中选择执行不同的css样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="allDevice.css">
</head>
<body>
<h1在一个css文件中使用不同的样式/h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</body>
</html>
贴图
