当前位置:首页 > 行业观点 > 详情
sousuo
sousuo

什么是RWD响应式网页设计?

上传时间:2022-06-10            浏览次数:543
RWD中文译为响应式网页设计(Responsive Web Design,简称RWD),维基百科译为「自适应网页设计」、「回应式网页设计」。因智慧型手机、平板电脑等智慧型行动装置的出现,各种装置具有不同的萤幕大小、比例,为了满足使用者于平板、手机等各种萤幕宽度上网的体验,而出现的网页制作架站技术。采用响应式网页设计技术制作的网站,可在同一个网站架构内,同时符合桌上型电脑、笔记型电脑、平板、手机等不同萤幕宽度的界面,达成第一次界面优化。
响应式网页设计(Responsive Web Design)简称RWD,又称适应性网页、回应式网页设计。指网站能跨平台使用,因应不同的装置,如:Iphone、Pad、或什至笔电,自动侦测使用者上网的装置尺寸,能针对不同萤幕的大小而自动调整网页图文内容,让使用者用各式各样装置浏览您的网站时,不用一直忙着缩小放大拖曳,给使用者最佳浏览画面,一页式网页也是衍生出来的代表。

由于现在行动装置使用者已超越电脑使用者,RWD是网站CSS3 media queries方式,以百分比的方式以及弹性的画面设计,在不同解像度下改变网页页面的布局,让不同的设备都可以正常浏览同一网站,提供最佳的视觉体验。

在RWD网页设计尚未成熟与普及以前,手机板网站也曾经流行一小段时间,做为传统网站与RWD网站的临时解决方案,由于手机版网站使用上还是有不少缺点无法改善,如今RWD网页设计可以用一个网站可以取代多种版本的网站方式,在制作上与管理上相对单纯许多,所以手机版网站已经渐渐被取代。
响应式网页于各个不同的载具介面呈现示意图,会因为萤幕大小而随着改变。
RWD响应式网页设计的原理与历史
Josh Clark针对「响应式」提出了以下的比喻「内容如同水一般」,可以把网页的内容想像成水,一样是500cc的水,但是在不同的容器会有不同的样子,会依照装水的容器外型随之改变,如下图左方;相同的网页内容,在智慧型手机、平板、桌上型电脑就会如同水一样,会依照不同的宽度大小呈现不同的样子。
由于智慧型手机萤幕较窄、较长的关系,因此介面设计较电脑版网页精简,例如主选单的设计常常采用三条线或是加号的设计,在网页设计的术语称作「汉堡包」,如同ccxcn官方网站右上方的设计。
以下提供您简单的响应式网页设计历史:
2002年:Audi.com在当时设计出第一个能符合萤幕大小进而缩放的网站,这里有来自当时开发作者的介绍。
2010年:由Ethan Marcotte提出了「Responsive Web Design」响应式网页设计一词。
2013年:Mashable(网际网路新闻部落格)将2013年定为响应式网页设计年,从此开始在世界各地流行。

本文作者:野狼优优

十六年网站建设相关经验
一站式为您提供网站相关服务

欢迎扫码咨询

发表评论
请遵守网络文明公约,理性发言
访客头像

还没有人来评论,快来抢个沙发吧!

0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们