1.整体缩放
整体缩放可以用在营销活动页，营销活动可能因为设计美观需求必须使用背景图片而非背景色，因此需要考虑背景图适应屏幕大小。开发者可以用320像素的宽度作为基础宽度（高度可以固定），然后通过计算实际文档宽度来进行相应缩放。
使用整体缩放布局开发的项目在加载过程中需要监听resize事件，代码如下：
window.addEventListener(‘resize’,document.body.clientWidth / 320);
除此之外，开发者需要在缩放的节点上添加transform-origin属性保证缩放是从原点开始，如果非原点缩放会导致页面不能完全显示，CSS代码如下：
.wrap {
width: 320px;
transform-origin: 0 0
}
2.媒体查询
另一种方法是使用背景色整体填充，主体使用不同的媒体查询进行大小优化，开发者需要对主流的屏幕分辨率进行设定，本实例因为要处理图标到背景图的精确定位，所以并不适合使用媒体查询，媒体查询更加适合一些展示型页面，本实例仅对外层做修改，假设拥有一个绿色背景，代码如下：
媒体查询会使代码量大幅增加，在实际开发中，开发者需要注意两点，一是将不需要根据屏幕变化的属性放到媒体查询外设置，减少代码冗余，二是设置好需要的媒体查询断点。
.wrap { background-color: green; } /* 设定外层背景色 */
.main-bg {
background: url(../images/main.jpg) no-repeat; /* 背景图片 */
background-size: 100%; /* 背景图片撑满容器 */
}
@media (max-width: 320px) { /* 适配320px宽度以下屏幕 */
. main-bg {
width: 320px;
height: 470px;
}
}
@media (min-width: 321px) and (max-width: 639px) { /* 适配320px到640px宽度屏幕 */
. main-bg {
width: 480px; /* 采用480px适配改区间 */
height: 705px; /* 调整高度放置图片拉伸 */
}
}
@media (min-width: 640px) { /* 适配640px以上宽度屏幕 */
. main-bg {
width: 640px;
height: 940px;
}
}
更多信息关注：
《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应
原文：http://www.cnblogs.com/book2006/p/7599334.html