注意：代碼運行是file協議，在chrome里不支持引用本地文件，會提示跨域錯誤，可以用firefox或者Safari打開

wty2368

移動端布局方案探究

研究了淘寶，天貓和網易彩票163的wap主頁樣式布局，總結移動端布局方案
注意：代碼運行是file協議，在chrome里不支持引用本地文件，會提示跨域錯誤，可以用firefox或者Safari打開

當時做的ppt下載: 2015年12月移動端布局方案探究

一、基本概念

1. 物理像素(physical pixel)

一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元

2. 設備獨立像素(density-independent pixel)

設備獨立像素(也叫密度無關像素)，可以認為是計算機坐標系統中得一個點，這個點代表一個可以由程序使用的虛擬像素(比如: CSS像素)

3. 位圖像素

一個位圖像素是柵格圖像(如：png, jpg, gif等)最小的數據單元。每一個位圖像素都包含著一些自身的顯示信息(如：顯示位置，顏色值，透明度等)

4. 設備像素比(簡稱dpr)

設備像素比 = 物理像素 / 設備獨立像素（在某一方向上，x方向或者y方向）

5. scale

縮放比：

scale = 1/dpr

6. 完美視口

 meta name= viewport content= initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1 / 

二、網易彩票設計方案

網易彩票

采用scale = 1.0寫死viewport

采用媒體查詢來確定html根元素的font-size值，即rem值

rem + 百分比布局

媒體查詢的css代碼如下：

//網易彩票的響應式布局是采用媒體查詢來改變rem值實現的//媒體查詢css#media-query{ @media screen and (min-width: 240px) { html,body,button,input,select,textarea { font-size:9px!important; @media screen and (min-width: 320px) { html,body,button,input,select,textarea { font-size:12px!important; @media screen and (min-width: 374px) { html,body,button,input,select,textarea { font-size:14px!important; @media screen and (min-width: 400px) { html,body,button,input,select,textarea { font-size:15px!important; // 省略}

三、天貓設計方案

天貓首頁

采用scale = 1.0寫死viewport

不采用rem，body的font-size=14px寫死

px + flexbox布局

四、遇到的問題

1. 高清屏下（ dpr 1 ）1px線模糊問題

大多數情況下，設計師產出各種尺寸的稿子，都是先畫出大尺寸（一般2x）的稿子，再去縮小尺寸，最后導出。 這樣會帶來問題：如果設計師在2倍稿子里畫了一條1px的線（例如border：1px），這時候假如我們要在scale=1.0里呈現的話，就會變成0.5px，而很大一部分手機是無法畫出0.5px的。
理論上，1個位圖像素對應于1個物理像素，圖片才能得到完美清晰的展示。在普通屏幕下是沒有問題的，但是在retina屏幕（dpr=2）下就會出現位圖像素點不夠，從而導致圖片模糊的情況。

2. 高清屏下（ dpr 1 ）高清圖片模糊問題

對于dpr=2的retina屏幕而言，1個位圖像素對應于4個物理像素，由于單個位圖像素不可以再進一步分割，所以只能就近取色，從而導致圖片模糊(注意上述的幾個顏色值)。所以，對于圖片高清問題，比較好的方案就是采用兩倍圖片。如：200×300(css pixel)img標簽，就需要提供400×600的圖片。
對于dpr=2的retina屏幕而言，1個位圖像素對應于4個物理像素，由于單個位圖像素不可以再進一步分割，所以只能就近取色，從而導致圖片模糊(注意上述的幾個顏色值)。所以，對于圖片高清問題，比較好的方案就是采用兩倍圖片。如：200×300(css pixel)img標簽，就需要提供400×600的圖片。

五、終極解決方案-- 淘寶設計方案

淘寶首頁

通過js處理獲取手機dpr參數，然后動態生成viewpoint

獲取手機物理像素寬度，分成10份，每一份的寬度即是rem的尺寸。

根據設計稿的尺寸（px）分三種情況進行處理，采用px + rem布局

相關的腳本如下：

$(document).ready(function(){ var dpr, rem, scale; var docEl = document.documentElement; var fontEl = document.createElement( style  var metaEl = document.querySelector( meta[name= viewport ]  var view1 = document.querySelector( #view-1  if(window.screen.width 540){ dpr = window.devicePixelRatio || 1; scale = 1 / dpr; rem = docEl.clientWidth * dpr / 10; }else{ dpr = 1; scale =1; rem = 54; }//貌似最新的淘寶網站又去掉了，只是限制了主體內容的寬度 // 設置viewport，進行縮放，達到高清效果 metaEl.setAttribute( content , width= + dpr * docEl.clientWidth + ,initial-scale= + scale + ,maximum-scale= + scale + , minimum-scale= + scale + ,user-scalable=no  // 設置整體div的寬高 view1.setAttribute( style , width: + docEl.clientWidth+ height: + docEl.clientHeight+ px  // 設置data-dpr屬性，留作的css hack之用 docEl.setAttribute( data-dpr , dpr); // 動態寫入樣式 docEl.firstElementChild.appendChild(fontEl); fontEl.innerHTML = html{font-size: + rem + px!important;}  $( body ).attr( style , font-size: + dpr * 12 + px  // 給js調用的，某一dpr下rem和px之間的轉換函數 window.rem2px = function(v) { v = parseFloat(v); return v * rem; window.px2rem = function(v) { v = parseFloat(v); return v / rem; window.dpr = dpr; window.rem = rem;})

六、設計方案總結

從以上的分析我們不難看出：

網易彩票的方案上手快，開發效率高，兼容性好，但是不夠靈活和精細；

天貓的設計思路比較簡單，flexbox非常靈活，但是flexbox的兼容性方面需要好好處理，不夠精細；

淘寶的方案幾乎解決了移動端遇到的所有問題，堪稱完美的解決方案，但是開發效率低、成本比較高。

相信看了這些案例你已經掌握了方法，更多精彩請關注php 其它相關文章！

相關閱讀：

HTML中的滾動條有哪些使用技巧

html兩秒跳轉至其他頁面

怎樣使用trigger方式實現不用點擊file類型的input彈出文件選擇對話框

a標簽中怎樣設置隱藏其他屬性只顯示圖片

以上就是HTML中移動端有哪些布局方案的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。