响应式网页设计

名词解释

noun	中译	解释
RWD	响应式web设计	网页内容会随着访问它的视口及设备的不同而呈现不同的样式
viewport	视口	浏览器中用于呈现网页的区域
	断点	宽度临界点，跨过这个点布局就会发生显著变化
flexible images	弹性图片	不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸
media queries	媒体查询	可以针对不同的屏幕尺寸设置不同的样式
front-end	前端	网站的前台部分包括网站的表现层和结构层
back-end	后端	负责各种后台编程语言,相关技术与框架,数据库开发,WEB安全等

---

响应式网页设计的必要性

我们可以从以下两张图得出我们需要响应式网页设计的理由。

2016全世界屏幕分辨率

全世界屏幕分辨率统计

从以上两张图我们可以得出以下主要的几点：

• 媒体发展至今，出现在我们日常生活中的屏幕分辨率已经多种多样数不甚数。
• 两极的分辨率有着不可轻视的差别。
• 以360x640为代表的分辨率统计线从2016年至今稳步上升，而以1366x768为代表的的分辨率则持续微微下降，在2016七月中旬还被超过了。

从以上几点可以总结到，仅满足在台式分辨率上展示网站网页以及平台已是不行的了
，还得满足且适应在更小的多的分辨率（手机）上展示。这时，响应式网页设计的需要性就展现出来了。响应式网页设计，能让网页内容会随着访问它的视口及设备的不同而呈现不同的样式。为了网民更好更惬意的生活，我们需要响应式网页设计。

---

有无响应式网页设计的例子对比

我们下来看看有的例子

分辨率为941x647

分辨率为375x667

网址在此：
响应式例子

再来看看没有应用的例子

分辨率为970x1294

分辨率为375x667

网站在此：
无响应式例子

我们可以通过两个例子的对比看出应用的响应式网页设计的网页能根据不同分辨率的显示下排出舒适方便的版面，而反观没有应用的，无论分辨率如何变化，网页版面始终不变，要在小的多的屏幕上看原本应该出现在大屏幕上的网页可是一件繁琐累人的事情。

---

RWD的组成科技

• 弹性网络布局
  可以简便、完整、响应式地实现各种页面布局。
• 弹性图片/媒体
  不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。
• 媒体查询
  可以针对不同的屏幕尺寸设置不同的样式。

有关RWD前后端的关系

在技术安排上，前端负责网页伺服器等客户端展现的事情，基本包括所有可见部分的代码编写，如果三层架构的话,可以看做是UI层。后端则负责数据库和云端，编写的代码基本上都是提供给前端调用，而不需要处理UI的内容。两者相当于一个着手于屏幕上的平面设计师另一个着手数据的计算机科学家。

而基于HTML5和CSS3的响应式web设计并不需要以来服务端或后端方案。

要想了解更多有关RWD的知识，详情点击Ethan Marcotte的文章。