移動端佈局方案探究

時間 2019-11-19

標籤移動佈局方案探究欄目無線简体版

原文原文鏈接

研究了淘寶，天貓和網易彩票163的wap主頁樣式佈局，總結移動端佈局方案
注意：代碼運行是file協議，在chrome裏不支持引用本地文件，會提示跨域錯誤，能夠用firefox或者Safari打開css

當時作的ppt下載: 2015年12月移動端佈局方案探究html

1、基本概念

1. 物理像素(physical pixel)

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

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

設備獨立像素(也叫密度無關像素)，能夠認爲是計算機座標系統中得一個點，這個點表明一個能夠由程序使用的虛擬像素(好比: CSS像素)git

3. 位圖像素

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

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

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

5. scale

縮放比：scale = 1/dpr跨域

6. 完美視口

<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1" />

2、網易彩票設計方案

網易彩票app

採用scale = 1.0寫死viewport
採用媒體查詢來肯定html根元素的font-size值，即rem值
rem + 百分比佈局

媒體查詢的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;
        }
    }
    // 省略
}

3、天貓設計方案

天貓首頁函數

採用scale = 1.0寫死viewport
不採用rem，body的font-size=14px寫死
px + flexbox佈局

4、遇到的問題

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的圖片。

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

淘寶首頁

經過js處理獲取手機dpr參數，而後動態生成viewpoint
獲取手機物理像素寬度，分紅10份，每一份的寬度便是rem的尺寸。
根據設計稿的尺寸（px）分三種狀況進行處理，採用px + rem佈局

相關的腳本以下：

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