响应式网页设计

---

第一章

所谓 响应式Web设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

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

• 弹性网格布局( fluid grid )
• 弹性图片/媒体( flexible images )
• 媒体查询（media queries）
• 视口（viewport）
• 设备（device）

---

1.名词解释

• 固定宽度

目标是让所有用户都拥有相同的体验

• gs.statcounter.com

StatCounter是美国一家网站通讯流量监测机构，提供各种类型的统计报告以及网站流量统计服务。
用户嵌入StatCounter 代码后，可以查看网站访问量、访问来源、访问地区、浏览器类型等。StatCounter统计功能强大、页面比较简洁，还可以当做计数器使用，用户也可以隐藏统计图标。

• 弹性网格（flexible grids）

可基于屏幕分辨率扩展或拉伸内容。

• 媒体查询（media queries）

是放在站点HTML和样式表中的代码段，用来收集设备显示能力的信息以支持多种形式的界面。

• 视口（viewport）

浏览器中用于呈现网页的区域

• CSS（层叠样式表）

是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

• 前端（front-end）

通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

• javascript

一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

• 后端(backend)

后端开发应是指后台程序设计,包括数据库设计动态代码编写,一般需要掌握下面几种语言和数据库:ACCESS,SQL,HTML,ASP,PHP,JSP,.Net,VBscript 或Javascript.

前端与后端

前端与后端

• 文本编辑器/工具

文本编辑器(或称文字编辑器)是用作编写普通文字的应用软件，它与文档编辑器(或称文字处理器)不同之处在于它并非用作桌面排版(例如文档格式处理)，它常用来编写程序的源代码。
例如Sublime Text、Vim、Coda、Visual Studio、Notepad

---

2.

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

全球桌面与移动与平板电脑市场份额2017年2月 - 2018年2月

从StatCounter提供的信息中，可以发现原本在2016年之前桌面的市场份额大于移动和tablet的市场份额，并且移动的市场份额一直呈上升的趋势，但在16年11月之后，移动的市场份额超越了桌面市场。这说明了越来越多的人们使用移动上网，为了让使用手机上网的用户更好的上网体验，响应式网页设计是一个不可或缺的存在。

---

3.有无采用响应式Web设计的例子对比

• 采用了响应式Web设计的网站：花瓣网
  

  花瓣网

• 无采用响应式Web设计：中大南方官网
  

  中大南方官网

弹性网格（flexible grids），可基于屏幕分辨率扩展或拉伸内容。
媒体查询（media queries），是放在站点HTML和样式表中的代码段，用来收集设备显示能力的信息以支持多种形式的界面。
视口（viewport），浏览器中用于呈现网页的区域

在上述二者的例子中，我们可以发现采用了响应式设计的网站的体验显然更好。第一，响应式网站可以根据不同终端、不同尺寸和不同应用环境，自动调整界面布局、展示内容、内容大小，提供非常好视觉展示效果，给用户带来了良好的体验。第二，它可以节省成本，不再需要有人特地维护PC页面，移动页面，节省人力物力。

前端（front-end），通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
后端(backend)，后端开发应是指后台程序设计,包括数据库设计动态代码编写,一般需要掌握下面几种语言和数据库:ACCESS,SQL,HTML,ASP,PHP,JSP,.Net,VBscript 或Javascript.

一个网站的呈现需要前端与后端的相互合作。前端负责网站的页面结构，外观视觉以及获取用户信息；后端则负责业务逻辑，实现功能、数据的存取、平台的稳定性与性能等。二者的相互合作，保证了网站的正常运转。

以上为我的课堂整理和思考。