响应式网页设计

名词解释：

---

• 响应式Web设计：简称RWD（Responsive Web Design）,是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。让它很好的适应智能手机。
  优缺点：响应式Web设计在企业站点，微型或者小站还是可以用的，对于（尤其大信息量展示的）大中型站点不合适。

** 视口(viewport):视口是与设备相关的一个矩形区域，坐标单位是与设备相关的“像素”，大多数情况下，视口与客户区相同。

• HTML:即超文本标记语言。结构包括“头”部分（Head）、和“主体”部分（Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

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

我们为何需要响应式Web设计？

---

数据来源statcounter

• 由上图数据可知人们对于屏幕分辨率的需求多种多样，为使网站的使用在不同屏幕上都适用，这要求我们应用好响应式Web设计。

近几年内，移动设备快速崛起，移动互联网慢慢进入人们的生活，预计未来5年内移动设备的使用度会超过桌面计算机。所以需要您的网 站不仅要在桌面计算机大尺寸屏幕上可以为用户提供友好的UI和用户体验，同时在小尺寸屏幕上也应该可以提供一致的用户体验。使得用户可以在桌面大屏幕上和 移动小屏幕上平滑的切换使用，同时没有任何的不适应感觉。

下面是应用了响应式web设计的网站

trentwalton

---

trentwalton手机页面显示 trentwalton电脑页面显示

下面这是中国政府网，并未采用响应式web设计

---

手机页面显示 电脑页面显示

RWD的三项组成科技

---

1.弹性图片／媒体(flexible images)：弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。

2. 弹性网格布局(fluid grid)：网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。
   弹性尺寸使用fr尺寸单位，其来自 "fraction" 或 "fractional unit" 单词的前两个字母，表示整体空间的一部分。
3. 媒体查询(media queries)：一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

RWD和前後端的关系

---

前端

• 前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。

后端

• 不需要依赖后端方案的RWD通常是网页版丶手机版丶等等一起服务丶设计丶产出页面

• 需要依赖后端方案的RWD通常是网页版丶手机版丶等等分开服务丶设计丶产出页面

了解更多

---

"响应式Web设计"这个名字是Ethan Marcotte在2010年发明的。
他在A List Apart写了一篇文章（http://www.alistapart.com/articles/responsive-web-design/）