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

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

一、基本概念

1. 物理像素(physical pixel)

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

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

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

3. 位圖像素

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

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

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

5. scale

縮放比：scale = 1/dpr

6. 完美視口

<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1" />復(fù)制代碼

二、網(wǎng)易彩票設(shè)計方案

網(wǎng)易彩票

• 采用scale = 1.0寫死viewport
• 采用媒體查詢來確定html根元素的font-size值，即rem值
• rem + 百分比布局

媒體查詢的css代碼如下：

//網(wǎng)易彩票的響應(yīng)式布局是采用媒體查詢來改變rem值實現(xiàn)的 //媒體查詢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;}}// 省略 } 復(fù)制代碼

三、天貓設(shè)計方案

天貓首頁

• 采用scale = 1.0寫死viewport
• 不采用rem，body的font-size=14px寫死
• px + flexbox布局

四、遇到的問題

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

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

---

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

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

五、終極解決方案-->淘寶設(shè)計方案

淘寶首頁

• 通過js處理獲取手機dpr參數(shù)，然后動態(tài)生成viewpoint
• 獲取手機物理像素寬度，分成10份，每一份的寬度即是rem的尺寸。
• 根據(jù)設(shè)計稿的尺寸（px）分三種情況進行處理，采用px + rem布局

相關(guān)的腳本如下：

$(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;} //貌似最新的淘寶網(wǎng)站又去掉了，只是限制了主體內(nèi)容的寬度// 設(shè)置viewport，進行縮放，達(dá)到高清效果metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');// 設(shè)置整體div的寬高view1.setAttribute('style', 'width:'+ docEl.clientWidth+'px; height:'+ docEl.clientHeight+'px');// 設(shè)置data-dpr屬性，留作的css hack之用docEl.setAttribute('data-dpr', dpr);// 動態(tài)寫入樣式docEl.firstElementChild.appendChild(fontEl);fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';$('body').attr('style', 'font-size:' + dpr * 12 +'px');// 給js調(diào)用的，某一dpr下rem和px之間的轉(zhuǎn)換函數(shù)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; }) 復(fù)制代碼

六、設(shè)計方案總結(jié)

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

• 網(wǎng)易彩票的方案上手快，開發(fā)效率高，兼容性好，但是不夠靈活和精細(xì)；
• 天貓的設(shè)計思路比較簡單，flexbox非常靈活，但是flexbox的兼容性方面需要好好處理，不夠精細(xì)；
• 淘寶的方案幾乎解決了移動端遇到的所有問題，堪稱完美的解決方案，但是開發(fā)效率低、成本比較高。

歡迎大家star學(xué)習(xí)交流：github地址 | 我的博客

參考文獻(xiàn)

移動前端開發(fā)之viewport的深入理解

【原創(chuàng)】移動端高清、多屏適配方案

wap手機端頁面根據(jù)dpr和寬度計算出font-size對應(yīng)數(shù)值

less語法

總結(jié)

以上是生活随笔為你收集整理的移动端布局方案探究的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。