页面的设计与开发应当依据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行对应的响应和调整。详细的实践方式由多方面组成，包含弹性网格和布局、图片、CSS media query的使用等。不管用户正在使用笔记本还是iPad。我们的页面都应该可以自己主动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。换句话说。页面应该有能力去自己主动响应用户的设备环境。

响应式网页设计就是一个站点可以兼容多个终端——而不是为每一个终端做一个特定的版本号。这样，我们就行不必为不断到来的新设备做专门的版本号设计和开发了。

2010年，Ethan Marcotte提出了“Responsive Web Design”这个名词，指可以自己主动识别屏幕宽度、并做出对应调整的网页设计。使站点的页面布局可以依据不同设备和分辨率进行自己主动调整。

作者老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com
转载请注明来源： http://blog.csdn.net/attilax

#-----------自适应布局VS响应式布局

问：“什么样的站点/项目适合使用自适应布局（固定断点）？什么样的站点适合响应式布局？（流体网格）”

答：理论上来说，响应式布局在不论什么情况下都比自适应布局好一些，但在某些情况下自适应布局更切实际。

自适应布局能够让你的设计更加可控，由于你仅仅须要考虑了了几种状态就万事大吉了。但在响应式布局中你可能须要面对非常多状态——是的，大部分状态之间的差别非常小。但它们又的确是不同的——这样一来就非常难确切搞清你的设计会是什么样。同一时候这也带来了測试上的难题，你非常难有绝对的把握预測到它会如何。换个角度说，这也是响应式布局的魅力所在。通过同意表面上的不确定因素存在，你能够获得更高层次上的确定。尽管你无法在精确到像素级别准确预知你的设计如何在943px×684px视觉区域汇中展示，但你能确定的是它们一定能展示的非常好——无论是表层特征还是布局结构都有条不紊。

自适应布局有它自己的优势，由于它们实施起来代价更低。測试更easy，这往往让他们成为更切实际的解决方式。

自适应布局能够看做响应式布局的“穷兄弟”。在资源有限的情况下就能够让它出马。

特别是改进现有站点的时候尤其奏效。由于所有重写代码在这时并不可行。这样的案例中。採用自适应布局是一个不错的出发点。

Dan Cederholm 在他的文章《Adapted》中也曾说过。这样的办法是可行的。

responsive-screens

设计思路Mobile First

Mobile First（从移动端開始，RWD ）：
一切从最小屏幕的手机端開始（比方 iPhone 的 320px ），先确定内容，然后逐级往大屏幕设计。

不同于原来网页设计，总是从桌面电脑的 1024px 開始的。

#---手机and平板分辨率

手机正常的2.8 --3.5--4.5 分辨率是320*480

平板好像是600*840

#---------viewport...同意网页宽度自己主动调整贝儿哪不个网页缩小兰..

以下的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里增加这个meta标签

#----------处理图片缩放的方法

简单的解决方法能够使用百分比，但这样不友好。会放大或者缩小图片。

那么能够尝试给图片指定的最大宽度为百分比。假如图片超过了。就缩小。

假如图片小了，就原尺寸输出。

img { width: auto; max-width: 100%; }

#----选择载入CSS Media Queries

自适应网页设计"的核心，就是CSS3引入的Media Query模块。
它的意思就是，自己主动探測屏幕宽度，然后载入对应的CSS文件。

Media Queries 是响应式设计的核心。

它依据条件告诉浏览器怎样为指定视图宽度渲染页面。

假如一个终端的分辨率小于 980px，那么能够这样写

@media screen and (max-width: 980px) {

#head { … }

#content { … }

#footer { … }

}

比如使用例如以下的代码，能够让屏幕宽度低于480像素的设备（如iPhone等），网页側栏隐藏中部内容栏宽度自己主动调节。下面代码针对Z-Blog。WordPress相关css样式的id标签名称仅仅需改动一下就可以。

@media screen and (max-device-width: 480px) {

#divMain{

float: none;

width:auto;

}

#divSidebar {

display:none;

}

#=====3、布局宽度使用相对宽度(弹性布局)

因为网页会依据屏幕宽度调整布局，所以不能使用绝对宽度的布局。也不能使用具有绝对宽度的元素。

这一条很重要。

网页整体框架能够使用绝对宽度，但往下的内容框架、側栏等最好使用相对宽度，这样针对不同分辨率进行改动就方便。当然也能够不用相对宽度。那就须要在 @media screen and (max-device-width: 480px) 里面添加各个div的针对小屏幕的宽度，实际上更麻烦。

#-----4、页面使用相对字体

在HTML页面上不要使用绝对字体（px）。而要使用相对字体（em），两者换算关系是：em = px*16 。比如16px就等于1em。

总之，依据上面四步进行改动的话，能够非常easy地将一个站点改动为适合多种设备浏览的页面。这对于通过手机訪问站点的用户来说，的确是一件好事。

流动布局（fluid grid）流体布局。弹性布局

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的优点是。假设宽度太小，放不下两个元素，后面的元素会自己主动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动栏的出现。
另外，绝对定位（position: absolute）的使用，也要很小心。

#----游戏网页的特别的设计

游戏网页由于必须显示在第一个屏上,所以,普通的自适应设计须要有些更改..

假如游戏为了纵向设计, 假如平板旋转,要是还是100%宽度显示,走游戏不能显示满的第一的屏...这样,就要使用jquery 获得屏幕宽度,要是纵横比,不是纵向的,就要限制一个最大宽度,能够显示第一的屏..

#------移动端/桌面端内容自适应

在server端操作 HTML 内容（比方为移动端降低内容，为桌面端提供很多其它内容）

很多的框架能实现这个.贝儿就要使用js/后台语言推断来实现..

值得收藏的14款响应式前端开发框架-CSDN.NET.htm

#-------图片背景的自适应

使用css3 or 使用一个zindex=-5的图片,width 100%

大尺寸图片的响应式设计

Filament组提出了第二种技术不仅是正确地设置图像的尺寸，在较小的设备中为了节约空间。还减少图像的分辨率，载入时间和移动宽带（流量）。

这样的技术须要一些文件，这些文件都在Github:一个JavaScript文件（rwd-images.js），Htaccess文件，和一张图片（rew.gif），然后。在HTML代码中，我们引用两种图片:一个小的“R”前缀，必须适应(“响应”)和大的data-fullsrc(HTML5启用的一个属性,很多其它详情能够訪问这个页面)。

实现这样的技术，看起来例如以下：

img <img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

当屏幕尺寸大于480px。页面就去载入大图片（largeRes.jpg）。JavaScript插入元素是能够同意页面分离适应的图片。

当页面载入完毕，除了大或者小图片会依据预先的设置来载入之外，全部文件都会正常的载入下来。假设这技术不起作用，全部的（大的和小的）图片都被载入下来，这样就会浪费宽带，反过来说。这技术防止了不必要的图片载入下来，另外它是兼容现代浏览器（包含IE8）和移动设备的。

混合使用自适应AWD and RWD

參考:

网页自适应的实现方法(网页分辨率不同以及手机和电脑网页的切换)_移动互联网开发_百度空间.htm

译文：自适应布局VS响应式布局以及最佳表单字段标签_Ryanwang_新浪博客.htm

手机web——自适应网页设计（html_css控制）_唐老鸭光光_百度空间.htm

自适应响应式设计 w3coo_CSS3-w3coo.htm

本文转自mfrbuaa博客园博客，原文链接：http://www.cnblogs.com/mfrbuaa/p/4664409.html，如需转载请自行联系原作者

码农公寓

响应式Web设计(Responsive Web design)的理念是：