什么是响应式网页？响应式网页有什么特点
可以根据浏览设备的不同，以及特性的不同，而自动改变布局、大小等，响应式网页的三个特征如下
1）流式网格布局(fluid)
2）可伸缩的图片和字体
3）CSS3 Media Query - 根据客户端浏览设备的特性，有选择的执行部分css
如何测试响应式网页
1、真实物理设备
优点：测试结构真实可靠
不足：测试任务量太大
2、使用第三方软件
优点：无需添置真实设备
不足：软件测试效率低，部分功能无法测试，测试结果有待进一步验证
3、使用浏览器模拟器测试
优点：测试功能强大，简单易用
不足：测试结果有待进一步验证
响应式布局必须要清除的两个概念
-
viewport
1) 2010年之前，html网页基本都是为pc设计的，宽度比较大,在手机上的显示内容会挤压到一块，后来iOSiOS引入了viewport(视口)的概念，来优化手机上观看网站的体验‘’2) iOS引入了viewport(视口)的概念：用于显示网页内容的一个逻辑概念，其高度和宽度都可以任意制定，网页不是显示在物理窗口，而是显示在视口中-就可以实现大网页不经缩放，直接显示手机中，但需要用户来回滑动 3) viewport的用法 <meta name="viewport" content="width=max-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)" rel="stylesheet" type="text/css" href="css/pc.css"/> 不足：客户端会不管媒体特性，请求所有的css文件 根据媒体的特性，执行某段css中的部分内容 @media screen and (min-width: 990px) {}
如何编写响应式布局
-
在head标签中，声明viewport元标签, 使网页的视口和浏览器的宽高保持一致
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" > -
根据浏览器的不同，加载不同的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" /> 同一个css文件中，也根据不同的屏幕分辨率，选择应用不同的css规则
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}-
注意：
1) 所有元素的宽不能制定固定值，必须使用相对的宽度值 width:"60%" 或者 width:"auto" 2) 字体不能使用绝对大小(px),必须使用相对大小(em) 3) 布局用的各个区块的位置都是浮动的，不是固定不变的 4) 除了布局和文本，还必须实现图片的自动缩放,或者根据客户端屏幕的不同，加载不同尺寸的图片
