HTML中移動端有什么布局方案

這篇文章給大家分享的是有關(guān)HTML中移動端有什么布局方案的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的阿克陶網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

wty2368

移動端布局方案探究

研究了淘寶，天貓和網(wǎng)易彩票163的wap主頁樣式布局，總結(jié)移動端布局方案

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

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

一、基本概念

1.物理像素(physicalpixel)

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

2.設(shè)備獨(dú)立像素(density-independentpixel)

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

3.位圖像素

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

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

設(shè)備像素比=物理像素/設(shè)備獨(dú)立像素（在某一方向上，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，而很大一部分手機(jī)是無法畫出0.5px的。

理論上，1個位圖像素對應(yīng)于1個物理像素，圖片才能得到完美清晰的展示。在普通屏幕下是沒有問題的，但是在retina屏幕（dpr=2）下就會出現(xiàn)位圖像素點不夠，從而導(dǎo)致圖片模糊的情況。

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

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

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

淘寶首頁

通過js處理獲取手機(jī)dpr參數(shù)，然后動態(tài)生成viewpoint

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

根據(jù)設(shè)計稿的尺寸（px）分三種情況進(jìn)行處理，采用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，進(jìn)行縮放，達(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屬性，留作的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é)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文標(biāo)題：HTML中移動端有什么布局方案
URL分享：http://muchs.cn/article48/gehoep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、微信小程序、網(wǎng)站內(nèi)鏈、網(wǎng)站導(dǎo)航、定制開發(fā)、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容