了解响应式布局

来源:互联网 发布:数据侠客行txt精校版 编辑:程序博客网 时间:2024/06/04 01:29
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,不仅看到很多的创新,还看到了一些成形的模式。
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

前端继续学习中。在CSS样式中看到响应式布局。感觉好高大上的样子。特意查询相关资料,整理如下。 
简单点说,就是页面排版布局能够兼容多个终端设备。要知道每个设备,尤其是移动端设备,各种尺寸。 
说的再多,不如图片来的直观。下面是知乎网页贴的图片,借过来展示下,当屏幕由大变小时,一目了然:https://www.zhihu.com/question/20976405

这里写图片描述

这里写图片描述

这里写图片描述


伊桑·马科特(Ethan Marcotte)在2010年首先提出了响应式网页设计的概念。这么说来有些年头了。 
考虑到现在智能手机越来越普及了,它们也可以方便的打开网页,但流量和布局是需要考虑的。当然,以前那种分开单独做一个手机页面的版本,现在也有些过时啦。既然同一个页面,不同的屏幕,自然显示不同的内容,总的来说,还是以内容为基准点,分清楚主次来显示。所以说,响应式布局和自适应布局,还是有些不同的。自适应更多的是强调内容显示正确性,而响应式布局强调的是内容主次性。

当然,好多时候,响应式布局也还是自适应布局的玩法,通过css控制div,百分比,最大值最小值,截断…不过有人提出一个错的经验,用Icon Font矢量图标,占用空间小,可控性高。bootstrap上就用。

总之,利用媒介查询(meida query),给用户舒适的想看的内容。over

0 0
原创粉丝点击