加载中 ...
首页 > 运营 > 交互 > 正文

什么是响应式Web设计?怎样进行?

2019-03-18 17:58:19 来源:

起头第一篇。老例子,先无聊的谈论气候一类的话题。十一长假,气候也终究起头有些秋季的味道,坐在屋里乃至感觉需要热咖啡。话说两年前也是在国庆假期里起头做Joomla文档翻译的;长假好光阴,总会可以抽出一两天,恬静的窝在家里做做博客、学做些新工具,的确没有比这更舒心的工作。

说正事儿。筹办在近期的几篇里集中翻译进修一下"响应式Web设计"的相干话题,包罗概念、实践体例、案例及不雅点会商等方面。比拟于畴前做的文档译文,这些文章篇幅要长的多(乃至要加分页了!),今天放上的这篇几近花失落了两天的"闲暇时候";对耐力是个考验,尽力进步喽。空话竣事,here we go.

眼下,几近每一个新客户都但愿他们的网站可以有专门的移动装备版本。最完善的环境呐,就是为iPhone、iPad、黑莓、Kindle……各自打造一款——页面分辩率还必需兼容任何装备。谁知道将来5年内我们还需要为几多新发现的装备设计开辟分歧版本的页面?这类疯狂甚么时辰算个头?

在Web设计和开辟范畴,很快的,我们将会没法跟上装备与分辩率改革的程序。对大都网站来讲,为每种新装备及分辩率建立其自力的版本底子就是不切现实的;成果就是,我们将会博得利用某些装备的用户群,而掉去那些利用其他装备的用户。不外,也许会有别的一种体例,可以帮忙我们避免这类环境的产生。

响应式Web设计(Responsive Web design)的理念是,页面的设计与开辟该当按照用户行动和装备情况(系统平台、屏幕尺寸、屏幕定向等)进行响应的响应和调剂。具体的实践体例由多方面构成,包罗弹性网格和结构、图片、CSS media query的利用等。不管用户正在利用笔记本仍是iPad,我们的页面都应当可以或许主动切换分辩率、图片尺寸及相干剧本功能等,以顺应分歧装备;换句话说,页面应当有能力去主动响利用户的装备情况。如许,我们便可以没必要为不竭到来的新装备做专门的版本设计和开辟了。

响应式Web设计的概念

Ethan Marcotte曾在A List Apart颁发过一篇文章"Responsive Web Design",文中援用了响应式建筑设计的概念:

比来呈现了一门新兴的学科——"响应式建筑(responsive architecture)"——提出,物理空间应当可以按照存在于此中的人的环境进行响应。连系嵌入式机械人手艺和可拉伸材料的利用,建筑师们正在测验考试建造一种可以按照四周人群的环境进行曲折、伸缩和扩大的墙体布局;还可使用活动传感器共同天气节制系统,调剂室内的温度及情况光。已有公司在出产"智能玻璃":当室内助数到达必然的阀值时,这类玻璃可以主动变成不透明,确保隐私。

将这个思绪延长到Web设计的范畴,我们就获得了一个全新的概念。为何必然要为每一个用户群各自打造一套设计和开辟方案?和响应式建筑类似,Web设计一样应当做到按照分歧装备情况主动响应及调剂。

明显,我们没法也无需利用活动传感器或是机械人手艺,响应式Web设计更多需要的是抽象思惟。好在,一些相干的概念已获得了实践,好比液态结构、帮忙页面从头格局化的media queries和剧本等。可是响应式Web设计不但仅是关于屏幕分辩率自顺应和主动缩放的图片等等,它更像是一种对设计的全新思惟模式。

调剂分辩率

分歧的装备都有各自的屏幕分辩率、清楚度和屏幕定向体例,不竭被研发着的各类新装备也将带来新的屏幕尺寸规格。有些装备基于横屏(portrait),有些是竖屏(landscape),乃至还有正方形;对日趋风行的iPhone、iPad及其他一些智妙手机、平板电脑,用户还可以经由过程动弹装备来肆意切换屏幕的定向体例。如何才能做到让一种设计方案知足所有环境?

要想做到同时兼容横、竖屏(用户还有可能在页面加载的进程中切换标的目的),我们就必需斟酌N种屏幕尺寸规格。诚然,我们可以将这些规格划分为几个年夜类,然后为每类做一种方案,确保该方案最少在本组中尽可能具有弹性。但即便如许,成果也将是非常焦炙的,谁知道某类装备在5年以后的据有率是几多?并且良多用户乃至不去将阅读器的窗口最年夜化;近似如许的变数,我们还要斟酌几多呢?

Morten Hjerde和他的同事们对2005至2008年市场中的400余种移动装备进行了统计(查看陈述),下图展现了年夜致的统计成果:

在08年以后,更多更有代表性的新装备问世并普及了。明显,我们不成以沿着"多方案"的思绪继续走下去;那末我们应当如何做呢?

部门解决方案:一切弹性化

几年前,弹性结构(flexible layout)几近是一种豪侈品,所谓弹性,也只是表现在竖排结构和字号等方面;图片始终可以等闲的粉碎页面布局,并且即便是哪些弹性的元素布局,在很极真个环境下,仍会粉碎结构。所以,所谓的弹性结构实在并不是那样弹性,它有时乃至不克不及顺应台式机与笔记本的屏幕分辩率差别,更不消说手机等移动装备了。

此刻,我们可以经由过程响应式的设计和开辟思绪让页面加倍"弹性"了。图片的尺寸可以被主动调剂,页面结构再不会被粉碎。固然永久没有最完善的解决方案,但它给了我们更多选择。不管用户切换装备的屏幕定向体例,仍是从台式机屏幕转到iPad上阅读,页面城市真实的富有弹性。

在前文提到的Ethan Marcotte的文章中,他经由过程一个实例展现了响应式Web设计在页面弹性方面的特征:

该实例的实现体例完善的连系了液态网格和液态图片手艺,而且伶俐的在准确的处所利用了准确的HTML标识表记标帜。"液态网格"是一种很常见的实践体例;对"液态图片"手艺,下面的文章做了不错的先容:

Hiding and Revealing Portions of Images

Creating Sliding Composite Images

Foreground Images That Scale With the Layout

说到建立液态页面,最都雅看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》,或是下载个样章先:"如何建立弹性图片"。别的,Zoe的这篇"Essential Resources for Creating Liquid and Elastic Layouts."供给了很多关于建立弹性网格和结构的教程、资本、创意指点和最好实践体例。

从手艺角度讲,固然听上去这些都简单可行,但它比"将这些功能连系在一路"要复杂些。举个例子,细心不雅察Ethan Marcotte供给的实例中的logo图片:

若是我们将阅读器窗口不竭调小,会发现logo图片的文字部门始终会连结同比缩小,包管其完全可读,而不会和四周的插图一样被双方裁失落。所以全部logo实在包罗两部门:插图作为页面题目的布景图片,会连结尺寸,但会跟着结构调剂而被裁切;文字部门则是一张零丁的图片。


The Baker Street Inquirer

此中,

元素利用插图作为布景,文字部门的图片始终连结与布景的对齐。

这个实例小小的展现一下响应式Web设计的思绪。不外这点小尽力还不足以免全部结构在小尺寸窗口中变的过窄或太短,而且logo文字终究会变的小到难以辨认,布景图片也会被过量的裁切。

“广域创业网”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题,请与

我们联系删除或处理,客服邮箱,稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同

其观点或证实其内容的真实性。