1.整體縮放 整體縮放可以用在營銷活動頁，營銷活動可能因為設計美觀需求必須使用背景圖片而非背景色，因此需要考慮背景圖適應屏幕大小。開發者可以用320像素的寬度作為基礎寬度（高度可以固定），然後通過計算實際文檔寬度來進行相應縮放。 使用整體縮放佈局開發的項目在載入過程中需要監聽resize事件，代碼如 ...
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;
}
}
更多信息關註：
