《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应

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;
	}
}

　　

 

更多信息关注：