响应式网页设计

名词解释

• RWD：即Responsive Web Design，译为响应式网页设计，一个网站可以同时适配多个设备和各种屏幕，网络布局和功能随之变化。

设计师在印刷介质中知道的并且通常在网络介质中需要的控制仅仅是印刷页面限制的功能。我们应该接受这样的事实，即网络没有相同的约束条件，并为此设计灵活性。但首先，我们必须“接受事物的潮起潮落”。
—— John Allsopp

• 前端：即front-end，为网站的前台部分，包括基本的HTML，CSS，Javascript，SVG等。

• 弹性网络布局：即fluid grip，为网络布局提供最大的灵活性。

• 弹性图片/媒体：即flexible images，图片在根据屏幕大小伸缩的时候，图片的比例保持不变。使用CSS的max-width属性，一行简单的代码就可实现。
  img { max-width: 100%;}

• 媒体查询：即media queries，在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。

媒体查询使我们可以在页面重新塑造时进行一些令人难以置信的精确微调：
—— Ethan Marcotte

• 断点：即breakpoint，某个宽度临界点，跨过这个点，布局就会发生显著变化。
• 视口：即viewport，浏览器中用于呈现网页的区域，并非所显示的屏幕大小。

为什么要使用RWD

1. 移动端的出现

众所周知，2007年Apple开启了手机上网的先河，移动端的使用和研发成为了一股浪潮，随着时间的推移，移动端以更容易接受、更方便快捷的方式广受青睐。而这，不断上升的数据，不断变化着的占比，标志着一个移动时代的到来。

2010年全球桌面与移动与平板电脑市场份额

2. 超越性的交叉点
2016年10月份中旬，从“ 每个家庭都有一部电脑 ” 延津到了 “ 人手一台手机 ” ，得益于技术的革新，市面上各类型的手机多得令人眼花缭乱。而设备的屏幕大小类型、设备布局能力也复杂了起来。

2016年全球桌面与移动与平板电脑市场份额

3. 抛弃传统的页面模式
21世纪是一个信息时代，更是一个智能化、人性化的时代。当用户在手机上浏览电脑端上的网页时，而页面完封不动照搬在的移动端上，靠缩放和放大两指去进行浏览操作，阅读文体时，尽管是年轻人也颇感吃力。响应式的网页设计便越发觉得更为贴心，也更契合现代的科技水平，标示着现代人更人性化的追求。

响应式网页成标杆

• 作为电商行业巨头的淘宝，用户永远是最重要的，而用户体验很大几率上决定了用户的第一印象，出于更为贴心的人性化设计和更舒畅的用户体验，我想，淘宝网应该会毫不犹豫地选择响应式了吧？
  https://www.taobao.com/
  网页版淘宝
  手机版淘宝网
• 全国高校的教务系统可能只是改了学校名称，连主色调都是一样的。
  而简洁的页面，看上去就没有过杂乱的目录或者是广告，所以干脆地就统一没有把网页做成响应式了吧。
  http://jwxt.nfsysu.cn/
  教务系统电脑版
  教务系统手机版

RWD和前后端的关系

前端，顾名思义就是用户在网页上看到的所有布局设计，HTML是由文字图片所组合成的元素，而CSS的工作就是决定字体大小、颜色效果、背景选择等等，JavaScript则表现出生动的动态效果。
后端，这就是用户看不见的，程序开发人员才能看到的“暗面”，就好比一盘美味的披萨，该怎么去制作饼底、披萨酱，食材准备和烤箱温度就是后端工程师的事情了，而前端则是摆盘的工作咯~
RWD基于HTML、CSS、JavaScript，对代码进行简单的修饰就可实现响应性服务了，从而摆脱复杂的后端方案了。

现在比以往任何时候，我们都在设计意在通过不同体验梯度来观看的作品。响应式网页设计为我们提供了一条前进的道路，最终让我们能够“为潮起潮落而设计”。
——Ethan Marcotte