响应式WEB设计

近期在学习有关响应式设计的内容，对此作了些整理，图片来源于网络，附上本身作的简单demo，没有js，只用CSS作了简单的搭建http://y.zhso.net/。

一、为何须要响应式web设计

　　出于对人力物力财力的节省和对生活富有诗意的一种追求。

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

　　简而言之，有以下几点：

• 　　各类屏幕尺寸
• 　　各类操做系统
• 　　各类访问设备
• 　　各类需求

二、什么是响应式web设计

　　一个网站兼容多个终端。

• 　　一样的代码
• 　　经过设备适配
• 　　知足不一样的访问设备
• 　　能展示出不一样的效果
• 　　始终内容优先
• 　　移动设备优先:不引人注目的js和逐渐加强
• 　　基于浏览器:特性活设备探测的逐渐加强

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

　　开发针对网站的、彻底独立的移动版本，开发移动应用APP。但这样作也存在必定的不足：

• 　　开发独立版本的网页，能够经过设备适配进行跳转，须要维护多个页面，对于首页级别页面适用，不适用于内容页
• 　　开发移动应用，开发成本高，不利于搜索引擎收录

四、响应式web设计的优点&不足

　　优点：

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

　　不足：

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

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

　　响应式布局：流体网络

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

　　自适应布局：固定断点

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

六、移动终端屏显元素

　　移动设备浏览器内核：Trident（IE）、Gecko（FF）、Presto（opera，已废弃）、Webkit（Safari、chrome）、Blink（google）

　　移动设备的尺寸：iPhone（980），iPad（1024），Android（分辨率480*800状况下，980），WinPhone（1024）等

　　移动设备的分辨率：

　　

　　

　　Viewport：经过Viewport把本身冒充成更宽的屏幕
　　<meta name=“viewport” content=“width=device-width”>

七、响应式web设计流程

　　用户研究与设备规格预估

　　

　　框架原型规划&测试

　　

　　视觉设计：须要保证内容文字的可读性、控件可点击区域的面积等

　　

　　前端构建：与传统的web开发相比，响应式设计的页面因为页面布局、内容尺寸发生了变化，因此最终的产出更有可能与设计稿出入较大，须要前端开发人员和设计师多沟通

　　

 

*Media Queries

• Max Width:可视区域的宽度小于某尺寸时被应用 @media screen and (max-width: 600px){}，也能够经过link外部文件实现<link rel="stylesheet" media="screen and (max-width: 600px)" href="xxx.css">
• Min Width:可视区域的宽度大于某尺寸时被应用 @media screen and (min-width: 900px){}
• Multiple Media Queries:可视区域的宽度在600px和900px之间的时候被应用 @media screen and (min-width: 600px) and (max-width: 900px){}
• Device Width:在某尺寸的设备上被应用 @media screen and (max-device-width: 480px){}
• For iPhone 4:<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css">
• For iPad:可使用media query在iPad上检测横竖屏的方向,portrait（竖屏） or landscapse（横屏）@media all and (orientation: portrait){}
• Media Queries for IE:IE8及如下版本不支持CSS3 Media Queries，能够经过使用javascript来进行弥补

 

 

PS：Js框架Modernizr：http://www.modernizr.com ，用于向缺乏HTML5/CSS3特性支持的浏览器打补丁

　　http://www.html5cn.org/article-8610-1.html，该文章讲述了10个响应式网页制做技巧，感兴趣的话能够看看哦