响应式网页设计

1.响应式网页设计的定义

响应式Web设计（Responsive Web Design）简称：RWD，基于HTML5和CSS3。
RWD这个名字是Ethan Marcotte于2010年发明的。当时他在A List Apart上写的一篇综合运用了三种已有技术（弹性网格布局、弹性图片/媒体、媒体查询）的文章实现了一个解决方案，就叫做“响应式Web设计”。
Ethan Marcotte的个人网页

响应式Web设计可以让一个网站同时适配多种设备的多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。就是网页内容会随着访问它的视口及设备的不同而呈现不一样的样式。（教科书）

2.RWD的三项组成科技

弹性网格布局

CSS Grid布局 （又名"网格"），是一个基于二维网格布局的系统，旨在改变我们基于网格设计的用户界面方式。

弹性的网格布局可以根据智能地根据用户行为以及使用的设备环境进行相对应的布局。（百度百科）

弹性图片

响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。(百度百科）

媒体查询

W3C的CSS3媒体查询模块的规范，官方给媒体查询下的定义：媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width、height和color都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让页面适配不同的设备。

使用媒体查询，可以针对不同的媒体类型定义不同的样式。可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
RUNOOB.COM

3.为什么我们需要响应式Web设计？

2017年2月至今，市场调查机构 statcounter 显示全球的移动手机使用占51.95%、桌面占43.98%、平板占4.07%。

rwd.PNG
调查
以前的网站固定宽度通常是960px，而比这个更宽的电脑设备飞速发展，全球手机浏览器的使用量开始超过PC浏览器。RWD作品适配手机、平板和桌面电脑，适应用户的屏幕大小，为今天和明天的设备都提供最佳用户体验。仅使用HTML5和CSS3就可，而不用后端支持。近年来大家开始注重手机及平板上的网页视觉效果。不管是从用户的使用情况还是从社会发展到今天的现状而言，响应式网页设计的出现可以大大提高用户的体验，相对于没有响应式设计的网页有一定的优势，从而获得更高的利益。
没有响应式设计的网页在不同设备和环境下拥有相同的画面，比如用手机浏览，就可能会出现字体太小，需要点击的时候要通过放大、拖拽等一系列麻烦的方式达到目的，阅读时不能提供符合手机屏幕的适当样式，造成一定的不便等。
综上，因为使用手机访问浏览器的用户开始超过使用电脑那种大屏的，对于手机操作上有诸多不便，所以我们需要响应式网页设计。

4.是否应用了RWD的网页例子

例如“一叶子”的官网，不管是常规的设备还是iPhone6还是iPad，甚至是其他不同的设备，它的页面布局都是一样的，对于屏幕较小的手机来说，其原本适应于大屏幕的页面布局显然太过“小巧”，不好操作。如下图：（同样的例子还有豆丁网）
一叶子官网

一叶子常规.PNG 一叶子iPhone6.PNG 一叶子iPad.PNG

而对于运用了响应式网页设计的作品，例如国外的购物网站Snipcart，它在不同设备上的效果是这样的：
Snipcart官网

响应式国外网站iPad.PNG 响应式国外网站iPhone.PNG 响应式国外网站常规.PNG

个人感想

上网浏览了很多关于响应式网站的资料，发现其实响应式网页设计是有利也有弊的，像国内一些视屏网站，爱奇艺、腾讯等没有选择做响应式的网页，而选择开发了适合手机的APP。是否值得做响应式页面也和其页面的复杂性有关，例如淘宝等。只有这个网站适合做响应式页面，响应式页面设计才是有意义和价值的。