响应式网页设计

名词解释

响应式Web设计（RWD）：网页内容会随着访问它的视口及设备的不同而呈现不同的样式。
HTML：超文本标记语言（英文全称：Hype Text Markup Language），主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
CSS：层叠样式表(英文全称：Cascading Style Sheets)。是一种用来表现HTML的一个应用或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS3：CSS3是CSS技术的升级版本
弹性网格布局（fluid grid）：
弹性图片/媒体（flexible images）：
媒体查询（media queries）：
前端（frontend）：
后端（backend）：
JavaScript：Web页面中的一种脚本语言，通过JavaScript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中，JavaScript用于为页面添加动态效果
Notepad：（记事本）是代码编辑器或WINDOWS中的小程序，用于文本编辑，在文字编辑方面与Windows写字板功能相当。是一款开源、小巧、免费的纯文本编辑器。
视口（viewport）：浏览器中用于呈现网页的区域
断点：某个宽度临界点，跨过这个点布局就会发生显著变化

为何需要"响应式网页设计"

Statcounter：过去12个月手机，平板和台式电脑使用百分比的比较

如图所示可看出随着现代化社会的发展，人们越来越偏向使用智能手机，而逐渐地，智能手机在某一定程度上可代替台式电脑，而平板占少数人使用。由此可见，在越来越多人使用智能手机的情况下，网站不能单单只适配特定的设备或屏幕，这时候，就需要“响应式网页设计”了，它能让一个网站同时适配多种设备和多个屏幕，让视口随用户的使用环境而自由变换。

举例

1. 采用了响应式Web设计

北京大学的官网

1114x863

375x667

2. 无采用响应式Web设计

正方教务管理系统

980x673

375x667

RWD的三项组成科技

1. 弹性网格布局（fluid grid）

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

2. 弹性图片/媒体（flexible images）

不仅能同比的缩放图片，还要在小设备上降低图片自身的分辨率

3. 媒体查询（media queries）

在某些条件下（如宽度和高度为多少的情况下）为网页应用样式。媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。

RWD和前后端的关系

前端

前端开发现在一般指的是web前端工程师负责网站前端页面，也就是网页的页面开发，换句话说，网站前端负责的东西是网站用户可见的东西，如网页上的特效、网页的布局、图片、视频等内容。网站前端工程师的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并和后端开发工程师配合做网页的数据显示和交互。所谓的应用产品的前端就是用户看到，接触到和体验到的，他们主要做静态用户界面加上一些动态效果，不涉及数据逻辑，前端考虑到的是用户体验。

后端

后端开发一般也叫做后台，其负责是网站后台逻辑的设计和实现还有用户及网站的数据的保存和读取。比如一般网站都是有用户注册和登录的，用户的注册的信息通过前端发送给后端，后端将其保存在数据库中，用户登录网站的时候，后端需要通过用户输入的用户名和密码是否与数据库中的一致来判断用户是否有权限登录，这是后台开发中的一个最简单的功能。

前端和后端

RWD并不需要以来服务端或后端方案