怎么设计响应式WEB？响应式WEB设计的优缺点
发布时间：2014-10-20 16:05:48 作者：佚名 
我要评论
我要评论传统的web页面已经不能满足多种设备的浏览效果，比如传统页面在大浏览器中会有较大的空白区域，而在小浏览器已经移动设备中，下面我们一起来看看响应式web设计的合理尺寸与优缺点
近期在学习有关响应式设计的内容，对此做了些整理，部分图片来源于网络。
1、为什么需要响应式web设计
由于目前移动设备的大量使用，以及PC显示器的尺寸逐渐出现较大差别，传统的web页面已经不能满足多种设备的浏览效果，比如传统页面在大浏览器中会有较大的空白区域，而在小浏览器已经移动设备中，不能完全显示页面，或是将页面缩小至适应移动设备尺寸大小，不能正常浏览，对于点击触点也有影响，很多人会选择放大页面，在进行浏览，这样整个页面就需要不停的拖动，给用户的体验不好。
简而言之，有如下几点：
各种屏幕尺寸各种操作系统各种访问设备各种需求
2、什么是响应式web设计
一个网站兼容多个终端。
同样的代码 通过设备适配 满足不同的访问设备 能展现出不同的效果 始终内容优先 移动设备优先:不引人注目的js和逐渐增强 基于浏览器:特性活设备探测的逐渐增强
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）等
移动设备的分辨率：
7、响应式web设计流程
用户研究与设备规格预估
框架原型规划&测试
视觉设计
前端构建
相关文章
今天的文章，我们将分享15个可以学习编程的网站，这些网站上提供了很多编程教程，图书以及编程练习，希望对你有用2024-11-02- 这篇文章主要介绍了web开发中的长度单位主要包括px,pt，em等,需要的朋友可以参考下2023-08-06
- px单位是绝对单位，一般用于pc端网页开发,因为是绝对单位所以在移动端上的使用体验并不是很好,rem它是描述相对于当前根元素字体尺寸，是相对单位,它可以根据根元素的变换而2023-08-06
WEB前端优化必备js/css压缩工具YUI-compressor详解与集成用法
压缩工具层次不穷，各有优点，选择适合的压缩工具为将来做项目开发使用是一件很重要的事情！！在这介绍YUI-compressor,需要的朋友可以参考下2023-06-21- 浏览器是多进程的，有浏览器主进程，网络进程，渲染进程，插件进程等，在将html，css，javascript解析成一个页面的时候，就需要多个进程的分工合作2023-05-01
- 本文为大家整理了常用的文件对应的MIME类型，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
这篇文章介绍了postman中form-data、x-www-form-urlencoded、raw、binary的区别，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-12-28- 国际组织制定了可以容纳世界上所有文字和符号的字符编码方案，称为Unicode，是通用字符集Universal Character Set的缩写，用以满足跨语言、跨平台进行文本转换、处理的要求2021-11-27
- 这篇文章主要介绍了前端实现字符串GBK与GB2312的编解码(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2020-12-02
这篇文章主要介绍了告别硬编码让你的前端表格自动计算,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-27
最新评论