响应式网页设计

响应式Web设计

响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。当然，让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”

RWD

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

HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言HTML的第五次重大修改

WWW

WWW是环球信息网的缩写，（亦作“Web”、“WWW”、“'W3'”，英文全称为“World Wide Web”），中文名字为“万维网”，"环球网"等，常简称为Web。 分为Web客户端和Web服务器程序。 WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。

HTTP

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。

DNS

万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过域名，最终得到该域名对应的IP地址的过程叫做域名解析（或主机名解析）。

URL

统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

为何需要响应式Web设计

因为越来越多的智能移动设备（ mobile, tablet device ）加入到互联网中来，移动互联网不再是独立的小网络了，而是成为了 Internet 的重要组成部分。响应式网络设计 （ RWD / AWD）的出现，目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。

没有用到响应式Web设计的网站：麦当劳

PC端：

手机端：

用到响应式Web设计的网站：星巴克

PC端：

手机端：

RWD的三项组成科技

• 采用 CSS 的 media query 技术
• 流体布局（ fluid grids ）
• 自适应的图片/视频等资源素材

RWD和前后端的关系

• RWD分为需要依赖后端方案的、不需要依赖后端方案的。

• 前后端的区别

最生动的例子就是网站的登陆界面，在一个网站登陆页面： 前端只要需要负责静态页面部分 ，鼠标移入输入框、移出输入框的颜色变化这部分的内容；但是输入用户名、密码 后登录系统的话要连接数据库，这个就需要后台开发做逻辑处理了！

• 需要依赖后端方案的RWD：网页版、手机版等等分开服务、设计、产出页面
• 不需要依赖后端方案的RWD：网页版、手机版等等一起服务、设计、产出页面

基于HTML5和CSS可以制作不需要后端方案的RWD

Marcotte

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