响应式网页设计

响应式Web设计

响应式Web设计(Responsive Web design简称RWD)：

名词解释：一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。

为何需要"响应式网页设计"：
下图为市场调查机构statcounter提供的2016年全年与2017年二月至2018年2月的台式电脑、手机与平板电脑的全球市场份额：

StatCounter-comparison-ww-monthly-201601-201612.png

StatCounter-comparison-ww-monthly-201702-201802.png

由以上两组数据可看出：
使用手机的人数在逐年增加，并在2016年十月中后旬超过了使用台式电脑的人数，并在2017一直保持着多于台式电脑的使用人数，但总体上二者的使用人数差距并不算大。
然而，手机、平板电脑与台式电脑屏幕大小差距还是十分显著的。而原先的普通网页无法自动适应不同的设备，所以常会出现在台式电脑屏幕上正常大小的网页在改用手机等移动设备访问时界面变得小且不方便浏览。在使用不同电子设备的人数逐渐增多的大背景下，使网页更好的适应访问设备屏幕也变得越来越有必要。且响应式网页设计仅使用HTML5和CSS3而不用后端支持。因其的方便被更多的人需要。

案例：
● Airbnb [www.airbnb.com]
以下为Airbnb网站在不同访问设备上的显示情况
iPad：

ipad.png

三星Galaxy S5：

三星Galaxy S5.png

台式电脑：

台式电脑.png

以上三幅图片可以了解到，Airbnb网站采用响应式网页设计模式，使得网站界面在不同设备不同尺寸的屏幕上呈现出与之相适应的效果。使访问者能更方便的浏览内容。

● 中国传媒大学 官网：[http://www.cuc.edu.cn/]
以下为中国传媒大学官方网站在不同访问设备上的显示情况

三星Galaxy S5：

Galaxy S5.png

iPad：

ipad.png

台式电脑：

台式电脑.png

由以上三张图看出，该网站没有使用响应式网页设计，因而同样的界面在不同设备屏幕上就呈现出截然不同的效果。于台式电脑屏幕上该页面大小适中且符合屏幕比例，可当更换成三星手机或者iPad时，页面的比例与屏幕就变得些许失调，文字与图片也变得不方便阅读。

关于RWD

● RWD的三项组成科技：

弹性网格布局(fluid grid)
弹性图片／媒体(flexible images)
媒体查询(media queries)

● RWD的前端与后端：

前端(front-end)：前端对于网站来说，通常是指网站的前台部分。前端设计一般可以理解为网站的视觉设计。
后端(back-end)：后端对于网站，通常是指网站的逻辑部分，主要涉及数据库，动态语言如PHP、ASP、JSP等。

前端与后端有何联系？
在我看来，前端就好像是网站的前台，而前端工作主要负责网站的界面展现与用户交互方面。而后端则更像是幕后的管理者，负责着网页的后台数据库等编程工作，维护着平台的稳定与良好的性能。因此，前端与后端二者是相互协调，相辅相成且不可或缺的关系。