移動web屏幕適配方案

剛進部門就被拉去趟移動端Web的渾水，視覺稿是按照640px設計的。那如何作屏幕適配呢？固然想到的第一方法就是問前輩了，問他們以前怎麼作的，前輩說直接按視覺稿來，我說640太大了，他說除以2啊，按320來。。我說不行吧，屏幕多種多樣的，6 plus顯示的得多小。。他說你和視覺溝通下。。。orz。。。仍是自食其力吧——網絡搜索，大概能搜到一些，不過要麼過高大全（淘寶的方案），要麼都是零零碎碎的。最終根據淘寶的方案還有Rem這個單位，本身作了一套簡單的方案。

---

開始呢，仍是要對一些概念作一些說明，固然不是我說明。。。

看這裏，還有這裏

最終的目的就是知道：

設備像素比 = 物理像素 / 設備獨立像素

window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

 

淘寶的方案

首先使用JavaScript動態計算dpr，就是上面咱們說道的設備像素比，而後在html head裏設置viewport裏的width以及scale，使得屏幕總體縮放，比較完美的解決了border 1px、各類奇葩屏幕的適配問題。而且在html上加一個自定義的屬性data-dpr來針對不一樣的屏幕寫css。

/**
 * 動態計算dpr
 */

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * 2 / 10;
scale = 1 / dpr;


// 設置viewport，進行縮放，達到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 設置data-dpr屬性，留做的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 動態寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

// 給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;

而後對於div、字體或者其餘css屬性，都使用data-dpr來作媒體查詢寫不一樣的css。

我的感腳，有種過高大全的感受，並且有些複雜了。最最重要的，有的手機，好比個人千元智能機，沒有識別meta標籤的縮放，頁面依然巨大。

 

媒體查詢

我感受最經濟實惠的就是媒體查詢了，根據市場佔有率與本身產品所注重的用戶羣體，得出須要適配的機型和屏幕，寫media query便可了。

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    /*iphone 6*/
}
 
 
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    /*iphone 6 plus*/
}

給出NEC的方案：

/* media */
/* 橫屏 */
@media screen and (orientation:landscape){
      
}
/* 豎屏 */
@media screen and (orientation:portrait){
      
}
/* 窗口寬度<960,設計寬度=768 */
@media screen and (max-width:959px){
      
}
/* 窗口寬度<768,設計寬度=640 */
@media screen and (max-width:767px){
      
}
/* 窗口寬度<640,設計寬度=480 */
@media screen and (max-width:639px){
      
}
/* 窗口寬度<480,設計寬度=320 */
@media screen and (max-width:479px){
      
}
/* windows UI 貼靠 */
@media screen and (-ms-view-state:snapped){
      
}
/* 打印 */
@media print{
      
}

 

弱弱的拿出個人方案

個人方案，借鑑了淘寶的JavaScript腳本，動態的設置html的font-size，其他的css屬性使用rem設置。

那麼須要肯定的font-size的基準值，通常設計稿都是640px寬度給出的，還有一些更高清的750px的，這裏借鑑了這篇文章，640px寬度時將基準值設置爲20px。

而後在每一個html頁面的head加入JavaScript代碼：

    (function(window) {
        var dpr, rem;
        var docEl = document.documentElement,
            fontEl = document.createElement('style');

        dpr = window.devicePixelRatio || 1;
        rem = docEl.clientWidth / 320 / 2 * 20;  // 以640px,html font-size 20px爲基準.
        docEl.setAttribute('data-dpr', dpr); 
        docEl.firstElementChild.appendChild(fontEl);
        fontEl.innerHTML = 'html{font-size: ' + rem + 'px!important;}';

        //備用
        window.rem2px = function(v) {
            return parseFloat(v) * 20;
        }
        window.px2rem = function(v) {
            return parseFloat(v) / 20;
        }

        window.dpr = dpr;
        window.rem = rem;
    })(window);

對於其餘的css屬性：字體、padding、margin什麼的，都用rem，爲避免計算麻煩，咱們可使用預處理器寫一下（MCSS）：

$px2rem =  ($px){
    @return ($px / 20 * 1rem);
}

 

這樣，簡單的適配了幾乎全部的屏幕，只須要按照視覺稿的尺寸來就行。用在本身的項目裏，效果還不錯。

 

其餘問題

border 1px

除了淘寶的粗暴的縮放，其他的方式都是合適的時候用合適的方法。

我比較喜歡scale的方式，最好使用預處理器，要不費勁。。。（參考）

.hairlines li{
    position: relative;
    border:none;
}
.hairlines li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}

須要判斷是否是高清屏,要不縮放了就不顯示了。

if(window.devicePixelRatio >= 2){
    document.querySelector('xxxx').classList.add('scale');
}

也可使用media query。

 

@media (-webkit-min-device-pixel-ratio : 2){
  // blalala
}

高清圖片

我以爲，這個最好有專門的工具作，好比網易的NOS，能夠對圖片作不一樣的處理，根據參數返回不一樣質量的圖片。

 

總結

剛剛接觸，查詢了一些資料，連接基本都在文章裏了。必定還有須要完善的地方或者更好的方式，求討論求指教。。。