响应式网页

响应式网站设计(Responsive Web design)的理念是：

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

详解参见：

http://www.runoob.com/css/css-rwd-viewport.html

1.什么是响应式网页？                          

  1G：模拟信号，手机只能打电话。

  2G：数字信号，手机可以发短信。

  2.5G：GPRS，手机可以浏览网页，WAP/WML。

  3G：智能手机，iOS/Android——底层都是Linux操作系统，具备真正的浏览器，可以浏览HTML网页。

  4G：4G是集3G与WLAN于一体，并能够快速传输数据、高质量、音频、视频和图像等。

  5G：其峰值理论传输速度可达每秒数十Gb（主要为速度的提高）。

  早期的HTML网页都是为PC浏览器准备的，宽度设定都很大，手机屏幕，浏览体验不佳！

  2010年5月提出的“Responsive Web Page”，响应式网页（自适应式网页），一个页面，可以根据浏览设备的不同、或使用环境的不同，自动的修改布局、图片尺寸、文字大小，从而可以保证所有的设备下都正常的浏览体验。

  好处：各种设备下都正常浏览

  不足：页面代码结构需要考虑到多种设备，编写难度更大，一般只适用于内容量不太多的页面。

 

2.如何测试响应式网页？

(1)使用真实物理设备测试——测试效果最好但最麻烦

(2)使用第三方模拟器软件测试——测试效果有待进一步验证

(3)使用浏览器提供的设备模拟器测试——最简单但有时测试效果与真实物理设备有所不同，需要进一步验证

小知识：Viewport，视口，屏幕中浏览网页的窗口 早期的手机浏览PC网页时只能把页面进行缩小，影响浏览体验： iOS系统提出了viewport的概念——承载网页的窗口，可以随意指定宽和高，但不能小于手机物理屏幕，可以让任意大小的网页不经缩放，直接显示 Android后来也引入了该概念 —— 只有移动浏览器才有该概念

 

3.如何编写响应式网页？

  (1)必须声明viewport元标签

      <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

  (2)容器尽量使用相对尺寸

       尽量避免绝对尺寸：  div.container {  width: 500px;  }

       使用相对尺寸代替：  div.container {  width: 80%;  }

  (3)文字大小尽量使用相对尺寸

       尽量避免绝对尺寸：  .text { font-size: 12px; }

       使用相对尺寸代替：  .text { font-size: 0.8rem; }

  (4)图片尽量使用相对尺寸

       尽量避免绝对尺寸：  img { width: 200px; }

       使用相对尺寸代替： img { width: 50%; }  指定在父容器中的宽度占比，可以随着父容器无限变大

                                    img { max-width: 50%; } 指定在父容器中的宽度占比，同时还不能超过自己的原始大小

  (5)页面布局尽量采用流式布局(Fluid)

       float:left;   或  display:inline-block;   

  (6)响应式网页必须CSS3 Media Query技术！

 

4.CSS3 Media Query

  Media：指浏览网页的设备，如screen(phone/pc/pad)、tv、projection、print、tty、braille 

  Query：使用CSS自动查询出浏览设备的特性，如位深、解析度、宽高、水平/竖直方向....

  CSS3 Media Query：根据浏览网页的设备类型不同，或者特性不同，而有选择的执行某些CSS，放弃执行另外的。

  媒体查询具体有两种使用方法：

  (1)有选择性的执行符合条件的外部CSS文件

       <link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="css/pad.css">

       缺陷：即使不满足当前浏览器条件的CSS文件，也会被浏览器请求。

  (2)有选择性的执行CSS片段中的部分内容

       @media screen and (min-width: 768px) and (max-width: 991px) {

             h3 {

                   display：none

             }

       }