您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)HTML中移動端有什么布局方案的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
注意:代碼運行是file協(xié)議,在chrome里不支持引用本地文件,會提示跨域錯誤,可以用firefox或者Safari打開
wty2368
移動端布局方案探究
研究了淘寶,天貓和網(wǎng)易彩票163的wap主頁樣式布局,總結(jié)移動端布局方案
注意:代碼運行是file協(xié)議,在chrome里不支持引用本地文件,會提示跨域錯誤,可以用firefox或者Safari打開
當(dāng)時做的ppt下載:2015年12月移動端布局方案探究
一、基本概念
1.物理像素(physicalpixel)
一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元
2.設(shè)備獨立像素(density-independentpixel)
設(shè)備獨立像素(也叫密度無關(guān)像素),可以認為是計算機坐標系統(tǒng)中得一個點,這個點代表一個可以由程序使用的虛擬像素(比如:CSS像素)
3.位圖像素
一個位圖像素是柵格圖像(如:png,jpg,gif等)最小的數(shù)據(jù)單元。每一個位圖像素都包含著一些自身的顯示信息(如:顯示位置,顏色值,透明度等)
4.設(shè)備像素比(簡稱dpr)
設(shè)備像素比=物理像素/設(shè)備獨立像素(在某一方向上,x方向或者y方向)
5.scale
縮放比:
scale=1/dpr
6.完美視口
<metaname="viewport"content="initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1"/>
二、網(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{
@mediascreenand(min-width:240px){
html,body,button,input,select,textarea{
font-size:9px!important;
}
}
@mediascreenand(min-width:320px){
html,body,button,input,select,textarea{
font-size:12px!important;
}
}
@mediascreenand(min-width:374px){
html,body,button,input,select,textarea{
font-size:14px!important;
}
}
@mediascreenand(min-width:400px){
html,body,button,input,select,textarea{
font-size:15px!important;
}
}
//省略
}
三、天貓設(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(csspixel)img標簽,就需要提供400×600的圖片。
對于dpr=2的retina屏幕而言,1個位圖像素對應(yīng)于4個物理像素,由于單個位圖像素不可以再進一步分割,所以只能就近取色,從而導(dǎo)致圖片模糊(注意上述的幾個顏色值)。所以,對于圖片高清問題,比較好的方案就是采用兩倍圖片。如:200×300(csspixel)img標簽,就需要提供400×600的圖片。
五、終極解決方案-->淘寶設(shè)計方案
淘寶首頁
通過js處理獲取手機dpr參數(shù),然后動態(tài)生成viewpoint
獲取手機物理像素寬度,分成10份,每一份的寬度即是rem的尺寸。
根據(jù)設(shè)計稿的尺寸(px)分三種情況進行處理,采用px+rem布局
相關(guān)的腳本如下:
$(document).ready(function(){
vardpr,rem,scale;
vardocEl=document.documentElement;
varfontEl=document.createElement('style');
varmetaEl=document.querySelector('meta[name="viewport"]');
varview1=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,進行縮放,達到高清效果
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屬性,留作的csshack之用
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);
returnv*rem;
};
window.px2rem=function(v){
v=parseFloat(v);
returnv/rem;
};
window.dpr=dpr;
window.rem=rem;})
感謝各位的閱讀!關(guān)于“HTML中移動端有什么布局方案”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。