《移動Web前端高效開發實戰》筆記1——靜態布局在移動端上的自適應

標籤：執行個體   分享   jpg   代碼冗餘   注意   eve   main   監聽   代碼   

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——靜態布局在移動端上的自適應