码迷,mamicode.com
首页 > 其他好文 > 详细

响应式布局

时间:2015-06-06 14:53:00      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

所谓“响应式网页设计(Responsive Web Design)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页设计。目前这种设计已经出现在越来越多的国内网站上,目前Google已经明确表明鼓励响应式网页设计。

通常在浏览网页时,手机上和电脑上无法显示同一个网页,这也导致许多网页设计会自动转到特定的链接上,如上图所示,无论在PC端还是移动端,网页的显示其实都是一个版本,会随着屏幕的大小网页而改变。

使用自适应网页设计有5个好处:

1, 随着移动设备越来越多,可以提升用户体验

2, 该设计没有网页版本区分,所以SEO的策略保持一致。

3, 可以避免重复内容,专心维护这一个网页。

4, 保持网页的原有链接。

5, Google也建议优先采用响应式设计,因为无论是什么网页版本都是相同的HTML、相同的内容,Google最容易处理。

响应式网页设计对SEO是友好的,这些相关技术还在不断演化中,还有许多尚待客服的地方。

下面来说说它的缺陷:

1, 对老版本IE支持不好,这是一个致命的问题,尤其是IE6,如果你的网站用户大多还采用老版本的IE的话(建议在统计工具里看一下),就不适合做响应式网页设计了。

其实我一直想采用响应式网页设计。

2, 例如一些小游戏站、视频站,如果仅仅是网页采用了响应式设计,但里面的内容依然是只能在PC端打开的话,这时候就要认真考虑了。

国外copyblogger的博客提到了一个很特别的案例,就是迪士尼公司的网页。他说在迪士尼网页中有许多给小朋友玩的网页游戏,有些游戏可以在桌上型电脑玩,但是如果使用移动设备就可以无法使用。因此这个情况下,就必须做出抉择,放弃使用Responsive Web Design,或是修改游戏。

1、为什么需要响应式web设计

由于目前移动设备的大量使用,以及PC显示器的尺寸逐渐出现较大差别,传统的web页面已经不能满足多种设备的浏览效果,比如传统页面在大浏览器中会有较大的空白区域,而在小浏览器已经移动设备中,不能完全显示页面,或是将页面缩小至适应移动设备尺寸大小,不能正常浏览,对于点击触点也有影响,很多人会选择放大页面,在进行浏览,这样整个页面就需要不停的拖动,给用户的体验不好。

简而言之,有如下几点:

各种屏幕尺寸各种操作系统各种访问设备各种需求

大屏幕:

 

 

 

技术分享

中屏幕:

技术分享

小屏幕:

技术分享

3、响应式设计的替代方案

开发针对网站的、完全独立的移动版本,开发移动应用APP。但这样做也存在一定的不足:

开发独立版本的网页,可以通过设备适配进行跳转,需要维护多个页面,对于首页级别页面适用,不适用于内容页开发移动应用,开发成本高,不利于搜索引擎收录。

4、响应式web设计的优势&不足

优势:

多终端视觉和操作体验风格统一开发、维护、运营成本低不同设备间的兼容性强操作灵活:响应式设计是针对页面的,可以只对必要的页面部分进行改动对用户友好:用户可以与网站一直保持联系,比如URL不变积累分享:通过单一的URL地址收集所有的社交分享链接最佳化搜索引擎:可以完成移动网站和桌面网站的连接无重定向:包含无用户代理定向

不足:

兼容性:低版本浏览器可能存在不兼容问题移动带宽流量:相比移动版定制网站,流量稍大加载需要一定的时间:在响应式设计中,需要下载一些看起来并不必要的HTML、CSS。除此之外,图片并没有根据设备调整到合适大小,而这正式导致加载时间加倍的原因优化搜索引擎:对于响应式web设计,为搜索引擎确定关键字不是一件容易的事。因此相比一般的桌面用户,移动用户多采用不同的关键字,修改标题及其他事项都比较困难Google排名:如果响应式网站仅基于移动内容,它困难会影响到网站的Google排名。因为Google不支持这样的网站,它不会对你的网站进行索引时间花费:开发响应式网站是一项耗时的工作。如果你计划把一个现有的网站转化成响应式网站,可能耗时更多。如果你想要一个响应式网站,最好从草图开始重新设计布局:响应式web设计的布局主要是液态的,这也正是设计者对设计样式不好控制的原因。而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。只有等到这两种布局均得到提高后,响应式web设计策略才能真正实现。

5、响应式与自适应的区别

响应式布局:流体网络

网页的布局改变重新排布更好的用户体验测试难度大

自适应布局:固定断点

网页的完全缩放实施代价低测试容易设计更加可控

6、移动终端屏显元素

移动设备浏览器内核:Trident(IE)、Gecko(FF)、Presto(opera,已废弃)、Webkit(Safari、chrome)、Blink(google)

移动设备的尺寸:iPhone(980),iPad(1024),Android(分辨率480*800情况下,980),WinPhone(1024)等

移动设备的分辨率:

技术分享

 

响应式布局

标签:

原文地址:http://www.cnblogs.com/ycss/p/4556562.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!