响应式网页设计

响应式网页设计

• “响应式网页设计”这个名字是Ethan Marcotte在2010发明的，即Responsive Web Design（RWD）。当时，他在A List Apart上写了一篇文章，这篇文章综合运用了三种已有技术（弹性网格布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫“响应式Web设计”。
• 响应式Web设计可以让一个网站同时适配多种设备的多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。就是网页内容会随着访问它的视口及设备的不同而呈现不一样的样式。

超文本标记语言

• 标准通用标记语言下的一个应用，超文本就是指网页内可以包含图片、链接，甚至音乐、程序等非文字元素。

层叠样式表

• 一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

为什么需要响应式网页设计

image.png

• 首先看占比最多的为“其他”分辨率，因为如今随着科技的迅速发展，不同的设备的分辨率不同，造成分辨率的数值无法统一，因此说，只有通过响应式Web设计才会针对任意设备的网页内容进行相对应的布局，才能真正脱离先前的传统布局方式。
• 再看人们用1366x768的屏幕分辨率的设备（即电脑）的趋势在不断下降，而用360x640的屏幕分辨率的设备（即手机）的趋势在不断上升，通过这个的比较，也能看出如今人们利用手机来上网的趋势在不断攀升，但同时利用电脑的人数也不能被忽视，因此，如果想要通过写一些较轻量的代码就能在不同设备中进行应用的话，响应式Web设计则是最佳选择。

image.png

• 从世界屏幕分辨率趋势图也不难看出人们使用手机上网的趋势不断攀升，因此不管是中国还是世界各个地区，为了满足各种用户的体验效果，使用响应式网页设计是一大趋势。

采用RWD设计与未采用该设计的例子进行对比

• 未采用响应式网页设计：正方教务系统网页（http://jwxt.nfsysu.cn/）
  
  

  image.png

• 采用响应式网页设计：天猫网页（https://www.tmall.com/?pid=mm_26632368_9250376_53442874&b=2siXCFbyAxv41h4m93l&disablePopup=true&disableSJ=1&spm=a2e15.8772214.0.0#/main）
  
  image.png

• 从这两个例子比较进行分析，则能看出运用了响应式网页设计与没有用响应式网页设计的区别所在，运用了RWD设计的则在不同分辨率中进行任意变化，有利于满足电脑与手机等用户对该软件的满意程度，而没有运用RWD设计的则会对用户的浏览进行一定的影响。

RWD的三项组成科技

• 弹性网格布局（fluid grid）：图片的尺寸可以被自动调整，页面布局再不会被破坏。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。

• 弹性图片（flexible image）： 不仅能同比的缩放图片，还要在小设备上降低图片自身的分辨率。其原理为rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。

• 媒体查询（media queries）：媒体查询是界面为了适应不同屏幕大小而存在的。媒体查询 是评估 True 或 False 的一种表达。如果为 True，则继续使用样式表。如果为 False，则不能使用样式表。这种简单逻辑能够更灵活地对特定的设计场景使用自定义的显示规则。媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。

RWD和前后端的关系

与前端的关系

• 前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计。
  前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

与后端的关系

• 通过编写后端的资料库来改变前端的呈现效果，也意味说后端是与数据库进行交互以处理相应的事务，后端需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

与RWD相关的文章

（http://alistapart.com/article/responsive-web-design）