研究了淘寶,天貓和網易彩票163的wap主頁樣式佈局,總結移動端佈局方案 注意:代碼運行是file協議,在chrome裏不支持引用本地文件,會提示跨域錯誤,能夠用firefox或者Safari打開css
當時作的ppt下載: 2015年12月移動端佈局方案探究html
一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元前端
設備獨立像素(也叫密度無關像素),能夠認爲是計算機座標系統中得一個點,這個點表明一個能夠由程序使用的虛擬像素(好比: CSS像素)git
一個位圖像素是柵格圖像(如:png, jpg, gif等)最小的數據單元。每個位圖像素都包含着一些自身的顯示信息(如:顯示位置,顏色值,透明度等)github
設備像素比 = 物理像素 / 設備獨立像素(在某一方向上,x方向或者y方向)chrome
縮放比:scale = 1/dpr跨域
<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1" />
複製代碼
網易彩票app
媒體查詢的css代碼以下:less
//網易彩票的響應式佈局是採用媒體查詢來改變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;
}
}
// 省略
}
複製代碼
天貓首頁函數
大多數狀況下,設計師產出各類尺寸的稿子,都是先畫出大尺寸(通常2x)的稿子,再去縮小尺寸,最後導出。 這樣會帶來問題:若是設計師在2倍稿子裏畫了一條1px的線(例如border:1px),這時候假如咱們要在scale=1.0裏呈現的話,就會變成0.5px,而很大一部分手機是沒法畫出0.5px的。
理論上,1個位圖像素對應於1個物理像素,圖片才能獲得完美清晰的展現。在普通屏幕下是沒有問題的,可是在retina屏幕(dpr=2)下就會出現位圖像素點不夠,從而致使圖片模糊的狀況。
對於dpr=2的retina屏幕而言,1個位圖像素對應於4個物理像素,因爲單個位圖像素不能夠再進一步分割,因此只能就近取色,從而致使圖片模糊(注意上述的幾個顏色值)。因此,對於圖片高清問題,比較好的方案就是採用兩倍圖片。如:200×300(css pixel)img標籤,就須要提供400×600的圖片。
對於dpr=2的retina屏幕而言,1個位圖像素對應於4個物理像素,因爲單個位圖像素不能夠再進一步分割,因此只能就近取色,從而致使圖片模糊(注意上述的幾個顏色值)。因此,對於圖片高清問題,比較好的方案就是採用兩倍圖片。如:200×300(css pixel)img標籤,就須要提供400×600的圖片。
相關的腳本以下:
$(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;
})
複製代碼
從以上的分析咱們不難看出: