什么是响应式网页
2000: 塞班、黑莓，GPRS，2.5G，可以浏览WML网页
2008: iOS/Linux，3G，Safari，可以浏览HTML网页
Android/Linux，Chrome，可以浏览HTML网页
Responsive Web Page 响应式/自适应网页，一个页面，可以在PC、平板、手机下正常/愉快的浏览。编写响应式应该在3方面加以注意：
(1)采用流式布局
(2)自适应的图片和文字大小
(3)CSS3媒体查询技术
如何测试响应式网页
三种测试方法：
(1)使用真实的物理设备来测试
优点：测试结果真实可靠
不足：测试工作量太大
(2)使用模拟软件来测试
优点：物理设备减少
不足：效率偏低，部分功能无法测试，测试结果有待进一步验证
(3)使用Chrome自带的设备模拟器来测试
优点：功能丰富(模拟多种设备、网速、经纬度、加速度....)
不足：测试结果有待进一步验证
| 2010年之前，所有的HTML网页都是为PC编写，iOS中浏览这样的网页，只能把所有的内容缩放到刚刚好可以在手机屏幕中观看——文字、图片缩放的很小近乎无法观看。 iOS最先提出了viewport的概念，宽和高可以指定为任意大，从而可以在一个较小手机屏幕下不经缩放的浏览一个很大的网页——副作用是：用户可能不得不左右滑动屏幕。Android系统后来也采用了此概念。
|
7.如何编写响应式网页——重点
(1)声明viewport元标签——只对iOS和Android
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
避免用户左右滑动屏幕的问题，初始时不进行缩放，且不允许用户缩放
(2)尺寸和大小不要使用绝对单位（如px），而用相对单位，如%、auto、em
(3)采用流式布局
(4)使用自适应/响应式图片
img {
max-width: 100%; /*指定占父元素的百分比，且不能超过自身原始大小，防止无限放大*/
}
(5)根据当前浏览设备的不同，有选择性的执行不同的CSS代码——CSS3 Media Query——实现响应式网页最最重要的技术！
8.CSS3媒体查询技术
Media：浏览网页的设备，如screen、print、tv、projection、tty、braille.....
Media Query：CSS3中提供的一门技术，可以自动查询出当前浏览设备的种类、宽高、分辨率、色彩位深、方向(portrait、landscape)等物理特性，有选择性的执行不同的CSS代码。
具体有两种用法：
(1)有选择的执行不同的外部CSS文件
<link media="screen and (min-width:768px) and (max-width:992px)" rel="stylesheet" href="xx.css">
缺陷：不论当前的浏览设备什么类型，所有link的css文件都会被加载，但有可能不会被执行。
(2)有选择性的执行某个CSS文件中的部分内容
在一个CSS文件中，编写：
@media screen and (min-width:768px) and (max-width:992px) {
body { ... }
.box { ...}
}
爱卡（深圳）管理有限公司
分享每一刻精彩
微信：iCafeYOJOY
微博：http://weibo.com/iCafeYOJOY
官网：www.icafe.im
