响应式网页设计 1

名词解释

响应式Web设计

1. 解释：网页内容会随着访问它的视口及设备的不同而呈现不同的样式
2. 思路：先为小屏幕设计内容、样式，然后再向大屏幕扩展
3. 优势： 不需要依赖服务端或后端方案
4. 3W： Ethan Marcotte、2010年、在A List Apart上写了一篇文章
   那篇文章综合运用了三种已有技术（弹性网格布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫“响应式Web设计（http://www.alistapart.com/articles/responsive-web-design/）

浏览器支持

1. 一般来说，要支持的浏览器版本越早，想达到现代浏览器中相同功能和效果所需的工作量就越大。
2. 做法：先写一个较轻量的代码架构，然后根据所需的体验针对能力更强的浏览器进行扩展，包括视觉和功能。
3. 渐进增强（优选）：从最简单的“基本”体验开始，逐步扩充
4. 平稳退化：先做出大而全的版本，后再针对能力不足的平台寻找后备方案

IE（Internet Explorer）

微软公司推出的一款网页浏览器。原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7、8、9、10、11版本)，简称IE。2015年3月微软确认将放弃IE品牌。转而在windows 10上，Microsoft Edge取代了。2016年1月12日，微软公司宣布于这一天停止对IE 8/9/10三个版本的技术支持。

IDE（Integrated Development Environment）

1. 解释：集成开发环境，用于提供程序开发环境的应用程序
2. 工具：一般包括代码编辑器、编译器、调试器和图形用户界面等，集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。
3. 常见IDE
   ① Microsoft Visual Studio
   （简称VS）是微软公司的开发工具包系列产品。VS是一个基本完整的开发工具集，它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控工具、集成开发环境（IDE）等等。所写的目标代码适用于微软支持的所有平台。Visual Studio产品包含C++、C#和VB.NET语言。还可以为Windows x86、Windows RT和Windows手机做开发。最新版被优化为可用于触摸，方便使用Microsoft Surface平板进行编程的开发者。开发者需要付费购买。
   ② Eclipse
   著名的跨平台开源IDE。最初主要用来Java语言开发，目前亦有人通过插件使其作为C++、Python、PHP等其他语言的开发工具。Eclipse的本身只是一个框架平台，但是众多插件的支持，使得Eclipse拥有较佳的灵活性，所以许多软件开发商以Eclipse为框架开发自己的IDE。

viewport

浏览器中用于呈现网页的区域叫视口，通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。

断点

1. 某个宽度临界点，跨过这个点布局就会发生显著变化
2. 断点应该由内容和设计本身决定

HTML

1. 超文本标记语言，标准通用标记语言下的一个应用。超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
2. 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

CSS

1. 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
2. 可以静态地修饰网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。

Javascript

1. 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
2. 基本特点：
   ①是一种解释性脚本语言（代码不进行预编译）。
   ②主要用来向HTML页面添加交互行为。
   ③可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
   ④跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

RWD

1. 响应式网站设计(简称RWD)是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。
2. ▲三个关键组成部分：
   ①media query：基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。
   ②流动网格：采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小。
   ③灵活缩放的图片：图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。
3. ▲前后端关系
   
   前后端关系
   
   前端：即浏览器、API伺服器等访客能够看到的
   后端：数据库或云端
   两者关系：即前台和后台的关系。可以用餐厅打个比方，前台是客户，后台是后厨等，而前后台之间还有个衔接即上图的Web services是走动于大堂与后厨的服务生，通过作为联结前后的服务生实现前后台的交流与呈现。浏览器等访客看到的是后厨完成的菜品，而后厨拥有的则是各种原生食材即数据库。但在人员安排上前后台还有平面设计师、前端工程师与后端工程师间的区分。

---

为何需要响应式网页设计

通过互联网与新媒体市场调查机构gs.statcounter.com上的图表数据，我们或许可以获得这个问题的答案。

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

全球屏幕分辨率统计2017.2至2018.2

1. 分析：图一为全球2016年桌面、移动与平板电脑的市场份额。我们可以清晰的看到，整个16年平板的市场份额持续低迷。在三月中下旬时移动与桌面的市场份额出现了交叉点，之后移动平缓上升，桌面出现了下降。
   图二为全球2017-2018的屏幕分辨率统计，各种分辨率的占比都在大小幅度的上升，分辨率趋向多样化。
2. 为何：通过以上两个图表数据的分析，证明了新时代下设备的各有不同，访问视口的种类繁多，网页内容需要面对不同设备来呈现不同样式，不再单一局限。为了满足设备需求和用户体验，务必采用响应式网页设计，通过“渐进增强”的方法加以实现。

---

是否采用响应式Web设计之对比

1. 采用（QQ音乐官网）
   
   QQ音乐
2. 未采用（天猫官网）
   
   天猫
3. 对比
   通过以上两张网站截图可以明显的看出，采用响应式Web设计的网页可以给用户带来更便捷优越的体验，提高页面的浏览速度，页面能被更广泛的设备访问。QQ音乐可以适应各式大小的屏幕，页面整体字体图片等会随屏幕变化用户不必担忧字体的过大过小而看不清楚。天猫因未采用响应式Web设计而使网页很大程度上散失了灵活性的体验。

---

注明：以上蓝色字体的均引用来源于百度