响应式布局

所谓“响应式网页设计(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，或是修改游戏。

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

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

简而言之，有以下几点：

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

大屏幕：

 

 

 

中屏幕：

小屏幕：

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

开发针对网站的、彻底独立的移动版本，开发移动应用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）等

移动设备的分辨率：