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

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

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

　　wty2368

　　移動端布局方案探究

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

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

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

　　一、基本概念

　　1.物理像素(physicalpixel)

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

　　2.設備獨立像素(density-independentpixel)

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

　　3.位圖像素

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

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

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

　　5.scale

　　縮放比：

　　scale=1/dpr

　　6.完美視口

　　<metaname="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{

　　@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;

　　}

　　}

　　//省略

　　}

　　三、天貓設計方案

　　天貓首頁

　　采用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&times;300(csspixel)img標簽，就需要提供400&times;600的圖片。

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

　　五、終極解決方案-->淘寶設計方案

　　淘寶首頁

　　通過js處理獲取手機dpr參數，然后動態生成viewpoint

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

　　根據設計稿的尺寸（px）分三種情況進行處理，采用px+rem布局

　　相關的腳本如下：

　　$(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;

　　}//貌似最新的淘寶網站又去掉了，只是限制了主體內容的寬度

　　//設置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屬性，留作的csshack之用

　　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);

　　returnv*rem;

　　};

　　window.px2rem=function(v){

　　v=parseFloat(v);

　　returnv/rem;

　　};

　　window.dpr=dpr;

　　window.rem=rem;})

感謝各位的閱讀！關于“HTML中移動端有什么布局方案”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！