响应式网页设计

名词解释

Internet:就是通常所说的互联网，是由一些使用公用语言相互通信的计算机连接而成的网络

WWW（World Wide Web）：译为“万维网”，是Internet提供的一种网页浏览服务

URL（Uniform Resource Locator）：译为“统一资源定位符”，实质上就是Web地址，俗称“网址”

DNS（英文Domain Name System）：译为“域名解析系统”

HTTP（Hypertext Transfer Protocol）：，译为“超文本传输协议”，是种详细规定了浏览器和万维网服务器之间相互通信的规则

HTML（HyperText Markup Language）：超文本标记语言，页面内可以包含图片、音乐、程序等非文字元素。
其中HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言HTML的第五次重大修改。相当于是HTML其中的一个版本

XHTML（Extensible Hyper Text Markup Language）：XHTML 指扩展超文本标签语言；
XHTML 的目标是实现HTML向XML的过渡；
XHTML 与 HTML 4.01 几乎是相同的；
XHTML 是更严格更纯净的 HTML 版本；
XHTML 是作为一种 XML 应用被重新定义的 HTML

Web:指互联网的使用环境，但对于网站制作者来说，它是一系列技术的总称，称之为网页
Web标准由W3C和其他标准化组织制定的一系列标准的集合，包含HTML、CSS、JavaScript等等

W3C:W3C（英文World Wide Web Consortium的缩写），译为“万维网联盟”，是国际著名的标准化组织

JavaScript：Web页面中的一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。通过JavaScript可以将静态页面转变成支持用户交互并响应相应时间的动态页面。在网站建设中，JavaScript用于将静态页面转化为动态页面，为页面添加动态效果

响应式Web设计（Responsive Web Design=RWD）：由Ethan Marcotte提出。网页内容会随着访问它的视口及设备的不同而呈现不同的样式，使Web作品适配手机，平板，桌面电脑，让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小，输入方式，设备，浏览器功能）而变化，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。
先针对小屏幕设计，再逐步扩展到针对大屏幕的设计。
基于HTML5和CSS3的的响应式web设计，并不依赖服务端或后端方案

CSS3（Cascading Style Sheets Level 3）：CSS3是CSS（层叠样式表）技术的升级版本，通常称为CSS样式或样式表，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块，主要用于设置HTML页面中的文本内容（字体，大小，对齐方式等），图片的外形（宽高，边框样式，边距等）以及版面布局等外观显示样式
CSS3媒体查询：可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式

CSS预处理器（Sass、 LESS、 Stylus、 PostCSS）：可以帮我们组织代码、变量、颜色操作和数学运算的工具

view point（视口）：浏览器中用于呈现网页的区域

max-width：保证所有图片最大显示为其自身的100%

DOM(文档折叠)：是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM

断点：某个宽度临界点，跨过这个点布局就会发生显著变

为何需要响应式网页设计

2016年中国屏幕分辨率趋势图

近期移动客户端浏览网页趋势图

2016年不同客户端使用趋势图

根据市场调查机构statcounter 2016年的中国的手机市场与台式电脑市场与平板市场对比，发现在16年三月中旬台式电脑的市场占有率和手机市场占有率有了交叉点，之后手机市场占有率逐渐上升，而台式电脑占有率逐渐下降，说明现在的中国手机使用者远远比台式电脑使用者多。
不仅仅在中国，世界范围内三个市场占有率的比较也在说明手机用户在全球的数量已经在2016年十月中旬就已经超过了电脑用户。
由于手机用户数量的上升，加上智能手机时代的来临，手机已经不仅仅具有打电话发短信这些功能了，能上网进行浏览是现代智能手机的基本功能。为此网页的设计者就不仅仅要考虑网页在电脑上的显示效果了，也要考虑随着互联网时代的到来，许许多多不同产品的屏幕大小，网页美观，网页布局等因素，所以响应式网页设计也应运而生。
几年前，我们看到的网站还都是固定宽度的，目标是让所有用户都拥有相同的体验。这种固定宽度（通常为960像素左右）对笔记本电脑来说也不算宽，拥有更大显示器的用户则会在两侧看到很大的白边。响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。
由于目前移动设备的大量使用，以及PC显示器的尺寸逐渐出现较大差别，传统的web页面已经不能满足多种设备的浏览效果。2016年10月，移动设备占全球市场份额已超越pc显示器。

例子

使用Web的网页：淘宝网
无使用Web的网页：天猫网

关于RWD的三项组成科技

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

• 弹性图片（flexible image）： 不仅能同比的缩放图片，还要在小设备上降低图片自身的分辨率。其原理为rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。

• 媒体查询（media queries）：媒体查询是界面为了适应不同屏幕大小而存在的。媒体查询 是评估 True 或 False 的一种表达。如果为 True，则继续使用样式表。如果为 False，则不能使用样式表。这种简单逻辑能够更灵活地对特定的设计场景使用自定义的显示规则。媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。

响应式网页设计的前后端关系

Web前端就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现
Web后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等
需要依赖后端方案的RWD：网页版、手机版、等等 分开服务、设计、产出页面

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

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

RWD的提出

“RWD”这个名字是Ethan Marcotte在2010年发明的。当时他在A List Apart上写了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），这篇文章综合运用了三种已有技术（弹性网络布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫“响应式web设计”。——摘抄自《响应式web设计基础》