研究了淘寶，天貓和網易彩票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+'px; 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的相容性方面需要好好處理，不夠精細；
- 淘寶的方案几乎解決了移動端遇到的所有問題，堪稱完美的解決方案，但是開發效率低、成本比較高。