自适应网页设计，英文名称叫Responsive Web Design.主要目的是为了在大小不同的设备上呈现相同的内容。本人在工作中遇到要用html写一个页面嵌入到android的webview中。这样的web设计起来就和PC 浏览器的web设计不太一样，主要是要考虑到移动设备屏幕分辨率不一样的问题。
经过我的观察，新浪微博有pad web 入口，手机 web 入口（两种m.weibo.com和m.weibo.cn），PC web入口，三种不同的前端，维护起来当然比较麻烦，而自适应网页设计做出的网页，一个前端能解决3中入口，当然技术上是有一定难度的。http://bradfrostweb.com/demo/mobile-first/#这个网页就是自适应网页，无论怎么调整浏览器的大小，所有UI都能适当的显示。那么怎么设计这么绚丽的网页呢，如下：
1. 在网页代码的head标签内加入如下代码：
<meta name="viewpoint" content="width =device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
其中initial-scale为初始化大小，即原始缩放比例，maximum-scale - 允许用户缩放到的最大比例，user-scalable - 用户是否可以手动缩放。
2. 字体和宽度不是用px
一般我们设计使用宽度如 xxx px; 但是要自适应的话最好改成 xx % 或者auto。字体我们不用px而是使用em来指定字体的大小，具体px和em怎么转换请网上自查。
3. 布局问题
我们使用流布局：float。好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
4. 加载CSS
核心思想就是判断屏幕的宽度然后选择就加载相应的CSS文件。具体例子：
<link rel="stylesheet" type="text/css" media="screen and (max-device- 480px)" href="mobile.css" />
以上代码的意思是当屏幕宽度小于480px的时候，加载mobile.css文件。当然屏幕宽度判断也可以是区间。我们也可以直接在CSS中判断需要加载的内容，例如：
@media screen and (max- 480px) {
.div1 {
float: none;
auto;
}
#div2 {
display:none;
}
}
以上代码意思是，如果屏幕宽度小于480像素，则div1(class)块取消浮动（float:none）、宽度自动调节（auto），div2(id)块不显示（display:none）
5. 图片自适应
img标签的话，只需要设置 max- 100%;或100%;
css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，如下：
style="
background-image:url(qipa.png);
background-size:100% 100%;
-moz-background-size:100% 100%; /* 老版本的 Firefox */
background-repeat:no-repeat;"
以上代码中加载的qipa.png图片就是可以自适应大小的。
国内各种博客中也发现关于这方面的内容基本都出自同一内容，没有什么大的亮点，其实直接看外国文章是非常好的办法，以下就是国外关于自适应web的博文：
http://www.html5rocks.com/en/mobile/responsivedesign/
讲的非常详细，当然也有人翻译成了中文，想要的可以留下邮箱。