进入终端互联网时代,各式各样相同的终端智能电子设备不断涌现,比如说智能机、智能手机笔记型电脑、可佩戴式电子设备等。据2017年8月第40次《中国统计报告发展状况统计数据报告》的统计数据结果,截至2017年6月,我国网友规模达至7.51亿,其中手机网友达7.24亿,占缅齐96.3%,较2016年底增长了1.2个百分点,与此同时,采用外设笔记型电脑、笔记本笔记型电脑等终端产品玩游戏的比例却略有下滑。这意味着网友的玩游戏电子设备更进一步向终端端集中,终端互联网优势地位更进一步强化。但各式各样相同的终端智能终端产品电子设备的萤幕大小不一和解析度都是各不相同的,而且即使是同一个电子设备,当采用者旋转萤幕时,纵向和纵向查阅的萤幕体积也会有差异,所以怎样使网页在相同的电子设备和相同的萤幕解析度下都能达至平庸的表明效果,使采用者不管透过什么终端产品都能达至平庸的下载和采用体验,是新型的网页结构设计与合作开发设计所要达至的市场需求。显然,传统固定产业布局的方式早已无法满足这种市场需求了,因此,现在越来越多的中文网站都早已开始采用积极响应式的思想来结构设计与合作开发网页。积极响应式网页结构设计早已成为当今网页合作开发设计的独派。
积极响应式网页结构设计的产生
积极响应式网页结构设计,全名是Responsive Web Design,最早是由亚伯特·马奈特(Ethan Marcotte)在2010年提出的一个基本概念,最主要的意图是“怎样使网页产业布局适应环境任何的下载询问处”。积极响应式网页的结构设计理念是,网页的结构设计与合作开发应当能依照采用者的行为以及电子设备自然环境(主要包括系统平台、萤幕体积、萤幕定向等)进行相应的积极响应和修正,也是网页如果有能力去全自动积极响应采用者的电子设备自然环境。具体来说,那个基本概念指的是中文网站的网页能相容多种相同的终端产品,依照相同的自然环境作出全自动的积极响应及修正。
积极响应式网页开发的同时实现方案有许多,主要包括CSS媒体查阅的采用、弹性分层和产业布局、INS13ZD影像等。无论采用者采用的是何种电子设备,积极响应式网页都如果能全自动转换解析度、图片体积及相关脚本功能等,以同时实现全自动的适应环境。
亚伯特·马奈特在其个人中文网站上给出了积极响应式网页的单纯实例。那个中文网站尽管单纯,却具备了积极响应式网页的要素:全自动适应环境、INS13ZD分层产业布局、INS13ZD影像表明等等。读者能尝试下载那个网页,透过全自动拖曳滑鼠发生改变下载器询问处的大小不一,查阅在相同下载器询问处体积下网页表明的变动。能看到,在相同的下载器询问处体积下,网页的门牌号没有发生变动,但网页的产业布局表明却可能略有发生改变,总的来看。
积极响应式网页在相同表明体积下的产业布局变动积极响应式和“自适应环境网页”
提到积极响应式网页,不得不提的是另一个“自适应环境网页”的基本概念了。新手对于这两个基本概念往往容易混为一谈。积极响应式网页具有自适应环境的特性,是指网页能全自动积极响应及网络连接采用者的电子设备自然环境,但平常所说的“自适应环境网页”是否是积极响应式网页呢?
答案是否定的。网络连接相同下载自然环境的控制技术有许多,而其本质上的“自适应环境网页”尽管也能针对相同的下载自然环境作出全自动修正,但其采用的未必是积极响应式网页的控制技术。比如早期的一些中文网站或现在一些门户中文网站的首页,能依照检测到的相同的客户端而提供相同的下载网页,比如专门提供一个Android的版本,或者一个iPhone / iPad的版本等,这也是同时实现中文网站相容相同终端产品的其中一种做法。我们往往能看到一些“自适应环境”中文网站的首页,用PC端下载时访问的是类似“www.xxx.com”的门牌号,而采用终端电子设备访问的是类似“m.xxx.com”的门牌号,可见打开的并非同一个网页。事实上这种做法同时提供了多个相同的网页,好处是能极大地保证相同自然环境下的表明效果,但是缺点也非常明显,是在中文网站维护时需要同时兼顾多个相同版本的网页,而且维护的工作将会呈几何级数上升。假如那个中文网站有多个入口,还会大大地增加架构结构设计的复杂度。所以,这种采用相同网页来网络连接下载条件的方式,往往比较多见于中文网站的首页,因为如果中文网站的所有内容页都采用这种方式,那个中文网站的结构将会变得非常臃肿。而类似这种跳转到相同门牌号、打开相同网页的网络连接方式,并不能称为真正的响应式网页,只能叫作“自适应环境”的。
积极响应式网页的特点
积极响应式网页的核心思想,在于“一次结构设计,普遍适用”,强调的是让同一个门牌号的同一个网页全自动地去适应环境相同的表明自然环境,并且能依照萤幕的设置和产业布局需要,来全自动调整网页内容的表明。而积极响应式的中文网站,不管采用什么电子设备,打开及表明的都是同一个门牌号、同一个网页,只是那个网页能透过全自动地识别萤幕宽度,对相同的采用自然环境作出相应的全自动修正,从而造成网页的产业布局和内容展示在不同自然环境下时可能会略有相同。
合作开发积极响应式网页时,首先我们需要发生改变一下以往的观念,在合作开发时“以终端电子设备优先”。为什么要选择终端优先呢?第一个原因是现在终端电子设备的采用率越来越高,而且随着终端互联网控制技术的发展,终端端的应用将成为重点。
还有基于中文网站合作开发流程方面的考虑。打个比方,想象一下我们搬家的时候,如果我们要把所有的东西从一个大房子搬到一个小房子,那么很有可能空间会比以前拥挤,而且如果东西太多放不下,可能要不得不舍弃掉一些东西,这种“舍弃”有时会是一个很艰难的决定。但是如果反过来,从一个小房子搬到一个大房子,那么空间会宽松许多。同样的道理,终端端稍微偏小的萤幕体积会使空间比较受限,那么就要求我们在设计时考虑把最重要的内容优先加载和展示,这样,即使后面迁移到较大的萤幕,也能保证整体的结构不会受到破坏,也许为了网页的美观可能需要增加一些内容,但毕竟做加法会比做减法容易得多。而且由于大小不一、带宽等限制,终端网页的结构设计绝大部分如果是内容性的结构设计,终端优先原则下提高采用者体验的一大法宝,是“把最重要的东西放在最显眼的地方”。
在这里先给出积极响应式网页的一些特点。在后面的学习中,我们将深入学习这些特点在网页中的同时实现。