HTML中行動端有哪些佈局方案

php中世界最好的语言
發布: 2018-02-22 09:15:04
原創
2752 人瀏覽過

最近我研究了淘寶,天貓和網易彩票163的wap主頁樣式佈局,今天給大家來總結一些移動端佈局方案,並且分析一下所使用技術的利弊。

注意:程式碼運行是file協議,在chrome裡不支援引用本機文件,會提示跨域錯誤,可以用firefox或Safari開啟

wty2368

行動裝置佈局方案探究

研究了淘寶,天貓與網易彩票163的wap主頁樣式佈局,總結行動裝置佈局方案
注意:程式碼運行是file協議,在chrome裡不支援引用本機文件,會提示跨域錯誤,可以用firefox或Safari開啟

當時做的ppt下載: 2015年12月行動裝置佈局方案探究

一、基本概念

1. 物理像素(physical pixel)

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

2. 裝置獨立像素(density -independent pixel)

裝置獨立像素(也叫密度無關像素),可以認為是電腦座標系統中得一個點,這個點代表一個可以由程式使用的虛擬像素(例如: CSS像素)

3. 位元圖像素

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

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

設備像素比=實體像素/ 裝置獨立像素(在某一方向上,x方向或y方向)

5. scale

縮放比:

scale = 1/dpr
登入後複製

6. 完美視窗

<meta name="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{
    @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;
        }
    }
    // 省略
}
登入後複製

三、天貓設計方案

天貓首頁

採用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×300(css pixel)img標籤,就需要提供400×600的圖片。
對於dpr=2的retina螢幕而言,1個位元圖像素對應於4個實體像素,由於單一位元影像素不可以再進一步分割,所以只能就近取色,從而導致圖片模糊(注意上述的幾個顏色值)。所以,對於圖片高清問題,比較好的方案就是採用兩倍圖片。如:200×300(css pixel)img標籤,就需要提供400×600的圖片。

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

淘寶首頁

透過js處理取得手機dpr參數,然後動態產生viewpoint

取得手機物理像素寬度,分成10份,每一份的寬度即為rem的尺寸。

依照設計稿的尺寸(px)分三種情況處理,採用px + rem佈局

相關的腳本如下:

$(document).ready(function(){
    var dpr, rem, scale;
    var docEl = document.documentElement;
    var fontEl = document.createElement(&#39;style&#39;);
    var metaEl = document.querySelector(&#39;meta[name="viewport"]&#39;);
    var view1 = document.querySelector(&#39;#view-1&#39;);
    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(&#39;content&#39;, &#39;width=&#39; + dpr * docEl.clientWidth + &#39;,initial-scale=&#39; + scale + &#39;,maximum-scale=&#39; + scale + &#39;, minimum-scale=&#39; + scale + &#39;,user-scalable=no&#39;);
    // 设置整体div的宽高
    view1.setAttribute(&#39;style&#39;, &#39;width:&#39;+ docEl.clientWidth+&#39;px; height:&#39;+ docEl.clientHeight+&#39;px&#39;);
    // 设置data-dpr属性,留作的css hack之用
    docEl.setAttribute(&#39;data-dpr&#39;, dpr);
    // 动态写入样式
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = &#39;html{font-size:&#39; + rem + &#39;px!important;}&#39;;
    $(&#39;body&#39;).attr(&#39;style&#39;, &#39;font-size:&#39; + dpr * 12 +&#39;px&#39;);
    // 给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;})
登入後複製

六、設計方案總結

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

網易彩票的方案上手快,開發效率高,兼容性好,但是不夠靈活和精細;

天貓的設計想法比較簡單,flexbox非常靈活,但是flexbox的兼容性方面需要好好處理,不夠精細;

淘寶的方案幾乎解決了移動端遇到的所有問題,堪稱完美的解決方案,但是開發效率低、成本比較高。

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

HTML中的捲軸有哪些使用技巧

html兩秒跳轉至其他頁面

怎麼使用trigger方式實作不用點選file類型的input彈出檔案選擇對話框

a標籤中怎麼設定隱藏其他屬性只顯示圖片

以上是HTML中行動端有哪些佈局方案的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!