响应式网页设计

响应式Web设计(Responsive Web design) ,简单来说,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。而RWD即 自适应网页设计(Adaptive Web Design),指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。




由(互联网与新媒体)市场调查机构 statcounter 的数据图表可知,全球移动和平板电脑的市场份额占了相当一部分,而且更新率也是非常快,因此,为了避免为不断到来的新设备做专门的版本设计和开发而投入大量的人力和物力,我们就需要研发像响应式Web设计(Responsive Web design)这样的对不同大小屏幕进行相应的响应和调整的技术。

相关数据查询链接如下:http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet

 响应式网站设计有三个关键组成部分:1. media query; 2. 流动网格;3. 灵活缩放的图片。

下面列举一个采用了响应式web设计的网站:http://www.etao.com/ 

基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM),而非传统设计使用的绝对单位(像素或点数),以确定页面各组成元素的大小。最后,图片大小也是采用相对单位而灵活缩放,不至于在小屏幕的移动设备上超出显示区域。

以及一个非响应式web设计的网站进行对比:http://www.sj33.cn/digital/wyll/201504/43741.html    

可以发现非响应式web设计的网站无法根据屏幕的大小来自动适应调整,从而无法带给使用者一个好的阅读视角

另外RWD能实现前后端数据的更好交互,从而使浏览界面更好地适配

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 名词解释 1、响应式web设计:响应式web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随...
    Sugwa阅读 4,645评论 0 0
  • 响应式网页设计 定义: 响应式Web设计(Responsive Web design)是:页面的设计与开发应当根据...
    little_bottle09阅读 4,001评论 0 4
  • 名词解释 响应式Web设计(Responsive Web Design) 所谓响应式Web设计,就是网页内容会随着...
    Autistic_8d3b阅读 4,746评论 0 0
  • 名词解释 响应式web设计:基于HTML5和css3的RWD响应式web设计,页面内容会随着视口及设备的不同而呈现...
    N黄舒婷阅读 3,437评论 0 0
  • 一天很长 一年很短 一天很长,百寂廖赖,漫漫熬难。 一年很短,春夏秋冬,一闪而斩。 一生更短,如梦如梭,飞逝空叹。...
    为世瑞阅读 10,507评论 0 1

友情链接更多精彩内容