如果您需要帮助

点击刷新

我们将提供专业的咨询与合理的报价

提交成功!我们将尽快与您取得联系

这里有你想了解的网站建设内幕,
知彼知己者,百战不殆!

Here's what you want to know about website construction,
Bosom friend, a hundred battles!

Web响应式介绍及其优缺点

本文作者:来源网络  发布于2016-07-11  分类:[产品要诀]

11

2016-07

阅读量:1128

点赞:0

【文章摘要】1、为什么需要响应式web设计 2、什么是响应式web设计 3、响应式设计的替代方案 4、响应式web设计的优势&不足 5、响应式与自适应的区别 6、移动终端屏显元素

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

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

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

2、什么是响应式web设计

一个网站兼容多个终端。

同样的代码,通过设备适配,满足不同的访问设备,能展现出不同的效果,这就是web响应式。

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

开发针对网站的、完全独立的移动版本,开发移动应用APP。但这样做也存在一定的不足。例如:开发独立版本的网页,可以通过设备适配进行跳转,需要维护多个页面,对于首页级别页面适用,不适用于内容页开发移动应用,开发成本高,不利于搜索引擎收录。

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

优势:

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

不足:

兼容性:低版本浏览器可能存在不兼容问题移动带宽流量:相比移动版定制网站,流量稍大加载需要一定的时间;在响应式设计中,需要下载一些看起来并不必要的HTML、CSS。除此之外,图片并没有根据设备调整到合适大小,而这正式导致加载时间加倍的原因优化搜索引擎;对于响应式web设计,为搜索引擎确定关键字不是一件容易的事。

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

响应式布局:流体网络

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

自适应布局:固定断点

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

6、移动终端屏显元素

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

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

下图为移动设备的分辨率:

点赞

标签 : 
  • 产品要诀
  • 产品设计

相关推荐

  • 北京网站建设|北京网站设计-20年网站建设公司【东方网景】
    2017年09/19

    北京网站建设:网站如何制作才能更好的符合...

  • 北京网站建设|北京网站设计-20年网站建设公司【东方网景】
    2017年08/29

    建一个H5响应式网站要多少钱的呢?

  • 北京网站建设|北京网站设计-20年网站建设公司【东方网景】
    2017年08/21

    如何建立一个有自己企业特色的官网

010-62692880 联系我们
北京网站建设|北京网站设计-20年网站建设公司【东方网景】
7x24客服热线
全国7x24小时客服热线
北京网站建设|北京网站设计-20年网站建设公司【东方网景】
产品全
专业市场策划团队
北京网站建设|北京网站设计-20年网站建设公司【东方网景】
收费优质
价格优惠
北京网站建设|北京网站设计-20年网站建设公司【东方网景】
优质服务
拥有百人团队服务
北京网站建设|北京网站设计-20年网站建设公司【东方网景】
系统稳
先进稳定的技术

北京市海淀区知春路6号锦秋国际大厦A1407