响应式网页设计

作者: Norman_2aa8 | 来源:发表于2018-03-11 20:47 被阅读0次

本文内容信息来源于网络搜索与《响应式web设计——HTML5和CSS3实战》
附上RWD创始人Marcotte的博客链接 https://ethanmarcotte.com/

响应式网页设计术语解释

响应式web设计（RWD）

该词由Ethan Marcotte于2010年发明，指的是种利用CSS3 media queries规则来使网页内容随着访问它的视口及设备的不同而呈现不同的样式的技术。
采用页面元素大小的相对单位，而非传统设计使用的绝对单位，以确定页面各组成元素的大小。图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。

超文本标记语言（HTML）

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

层叠样式表（CSS）

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

JavaScript

JavaScript是一种解释性脚本语言（代码不进行预编译），主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为，可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

窗口（window）与视口（viewport）

在 Windows的作图函数中，涉及逻辑坐标到设备坐标的转换。这里提到的窗口（window）、视口(viewport)是对应的概念。
视口是与设备相关的一个矩形区域，坐标单位是与设备相关的“像素”，大多数情况下，视口与客户区相同。窗口的坐标是逻辑坐标，与设备无关，可能是像素、毫米或者英寸。
窗口坐标的原点与视口坐标的原点始终对应于同一点，对于同一个图形，用窗口坐标系统表达的该区域的长和宽与视口的坐标系统表达的长和宽是不同的。
二者就定义了这两个坐标系统的比例关系。程序作图时，使用的坐标总是是窗口坐标。而实际的显示或输出设备却各有自己的坐标。

Sublime Text

Sublime Text 是一个代码编辑器（Sublime Text 2是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。
Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。
Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

VIM

Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性。Vi，是一款由加州大学伯克利分校研究开发的文本编辑器。

Visual Studio

是美国微软公司的开发工具包系列产品。VS是一个基本完整的开发工具集，它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控工具、集成开发环境(IDE)等等。
所写的目标代码适用于微软支持的所有平台，包括Microsoft Windows、Windows Mobile、Windows CE、.NET Framework、.NET Compact Framework和Microsoft Silverlight 及Windows Phone。

Notepad

notepad（记事本）是代码编辑器或WINDOWS中的小程序，用于文本编辑，在文字编辑方面与Windows写字板功能相当。是一款开源、小巧、免费的纯文本编辑器。
Notepad内置支持多达 27 种语法高亮度显示(囊括各种常见的源代码、脚本，值得一提的是，完美支持 .nfo 文件查看)，也支持自定义语言。

RWD的三项组成科技

流动网格（Fluid Grids）

流动网格指的是采用页面元素大小的相对单位，而非传统设计使用的绝对单位，以确定页面各组成元素的大小。

灵活的图片（Flexible Images）

灵活的图片指的是图片大小采用相对单位而可灵活缩放，不至于在小屏幕的移动设备上超出显示区域。

媒体查询（Media Queries）

媒体查询允许网页根据访问站点设备的特点而使用不同 CSS 样式规则，最常用的是浏览器的宽度。

RWD和前后端的关系

与前端的关系

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

与后端的关系

通过编写后端的资料库来改变前端的呈现效果，也意味说后端是与数据库进行交互以处理相应的事务，后端需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

为什么我们需要“响应式网页设计”？（图中数据来自gs.statcounter.com）

全球桌面与平板电脑市场份额.png

从该图片我们可以看出如今网络设备的多样化，并且可以看出移动用户总量总体处于上升阶段，越来越多的人选择使用移动客户端来登录网站、使用网络。

全球屏幕分辨率.png

从这图片也可看出设备的分辨率差异巨大，而以往的网页设计方式仅能够适应单一分辨率，为了满足各平台用户的需求以及优化体验才能够带来更高的点击率，响应式网络设计应运而生。

采用RWD设计与未采用该设计的例子进行对比

采用RWD设计

淘宝

采用非RWD设计

简书

对比带来的分析

运用RWD设计的能够不同分辨率中进行自适应化，有利于满足电脑与手机等用户对该软件的满意程度，而没有运用RWD设计的则会对较低分辨率的用户浏览造成影响，破坏用户体验。