16-1025am day01
1.响应式网页 —— 重点
2G——不能上网
2.5G——GRPS——只能浏览WML网页
3G——智能操作系统——浏览HTML网页
1.什么是响应式网页？
Responsive Web Page，一个网页，可以根据浏览设备的不同，而自动更改布局、图片、文字效果，不会影响用户的浏览体验。
响应式网页的构成：
(1)布局：不能固定宽度，必须是流式
(2)文字和图片大小随着容器大小而改变
(3)CSS3 Media Query
2.如何测试响应式网页？
(1)使用真实的物理设备来测试
优势：测试效果真实可靠
不足：测试任务量太大
(2)使用设备模拟软件来测试
优势：快速，不需要准备大量的物理设备
不足：测试结果有待进一步验证
(3)使用Chrome自带的设备模拟器
优势：简单直观，功能比较丰富
不足：测试结果有待进一步验证
viewport：iOS诞生时网页都是为PC编写，只能进行强制缩放后才能在手机中显示——后果是所有的图片、文字都小到无法看清。苹果公司提出了Viewport（视口）的概念——可以在远比物理屏幕更宽的范围内浏览网页，不经缩放。后果是用户不得不左右滑动屏幕。后来的Android也借鉴了视口的概念。
3.如何编写响应式网页？——重点
手写响应式网页必须注意的六点：
(1)必须声明viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
width=device-width:视口当前采用的宽度等于设备宽度
initial-scale=1.0 缩放比例的1.0
user-scalable 的作用是用户不能缩放 默认是yes
<meta>标签一定要放在head之后（紧接着）
避免用户左右滑动屏幕，禁止浏览器初始时缩放显示
(2)容器的宽度尽量不使用固定值(px)，使用相对宽度(%或auto)
(3)文字尽量不使用绝对尺寸(px)，使用相对尺寸(em或rem)
在pc中字体默认是14px，2em代表28px;
(4)图片要指定大小，如下方式：
img {
/*width: 400px; */ //不用它
/*width: 100%; 可随容器无限缩放*/ //不用它
max-width: 100%; 可随容器缩小，但最大不会超过图片的原始大小——防止马赛克
}
(5)页面布局时不能固定，而要用流式布局，如浮动、inline-block
(6)灵活的使用CSS3 Media Query技术——响应式网页必备元素！
4.使用CSS3 Media Query技术——重中之重
Media：指浏览网页的设备，如screen、tv(电视)、projection(投影仪)、tty(字符终端)、print(打印机 )、braille(盲文手机)、speech(语音设备)等
Query：指自动获取当前浏览设备物理特性，如色彩深度、orientation(方向)、width、height等
CSS3媒体查询技术：可以自动根据浏览设备的类型及特性，执行不同的CSS代码。
CSS3MediaQuery有两种具体用法：
(1)根据媒体查询的结果，执行不同的外部CSS文件
<link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="css/pad.css"/>
不足：即使当前设备不执行的CSS文件，也会被浏览器加载；每个CSS文件中可能存在很多重复代码
(2)在一个CSS片段中，有选择的执行某些选择器
@media screen and (min-width: 768px) and (max-width:991px) {
选择器 { 名: 值； }
}
当屏幕宽度大于768px 小于991px时执行这些选择器 记忆方法(往相反方向记忆)：min指的是当大于..时
午间练习：使用媒体查询的第二种用法，实现下面的响应式网页
