《移動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;
	}
}

　　

 

更多信息關注：