摘要：本篇文章分享了一些處理多屏幕自適應的經驗，希望有益于各位。該寬度自適應在新的時代有了新的方法，隨著彈性布局的普及，它經常被的伸縮性布局方式替代，變得越來越彈性十足。

轉自：http://www.cnblogs.com/consta...

前言

隨著移動設備的普及，移動web在前端工程師們的工作中占有越來越重要的位置。移動設備更新速度頻繁，手機廠商繁多，導致的問題是每一臺機器的屏幕寬度和分辨率不一樣。這給我們在編寫前端界面時增加了困難，適配問題在當下顯得越來越突出。記得剛剛開始開發移動端產品的時候向設計MM要了不同屏幕的設計圖，結果可想而知。本篇文章分享了一些處理多屏幕自適應的經驗，希望有益于各位。
特別說明：在開始這一切之前，請開發移動界面的工程師們在頭部加上下面這條meta：

簡單事情簡單做-寬度自適應
所謂寬度自適應嚴格來說是一種pc端的自適應布局方式在移動端的延伸。在處理pc端的前端界面時候需要用到全屏布局時采用的就是此種布局方式。它的實現方式也比較簡單，將外層容器元素按照百分比鋪滿的方式，里面的子元素固定或者左右浮動。

.div {
  width:100%; height:100px;
}
.child {
  float: left; 
}
.child {
  float:right;
}

由于父級元素采用百分比的布局方式，隨著屏幕的拉伸，它的寬度會無限的拉伸。而子元素由于采用浮動，那么它們的位置也會固定在兩端。該寬度自適應在新的時代有了新的方法，隨著彈性布局的普及，它經常被flex的伸縮性布局方式替代，變得越來越“彈性”十足。需要了解彈性布局，請前往flex布局教程。

大小之辨-完成自適應

這種解決方案相對前一種來說進步不少，不僅僅寬度實現了自適應，而且界面所有的元素大小和高度都會根據不同的分辨率和屏幕寬度的設備來調整元素、字體、圖片、高度等屬性的值。簡單來說就是在不同的屏幕下，你看到的字體和元素高度的大小是不一樣的。在這里，有人就會說利用的是媒體查詢屬性，根據不同的屏幕寬度，調整樣式。我之前也是這樣想的，但是你需要考慮到界面上的許多元素需要設置字體，如果用media query為每個元素在不同的設備下都設置不同的屬性的話，那么有多少中屏幕我們的css就會增加多少倍。實際上在這里，我們采用的是js和css屬性rem來解決這個問題的。
REM屬性指的是相對于根元素設置某個元素的字體大小。它同時也可以用作為設置高度等一系列可以用px來標注的單位。

html {
 font-size: 10px;
}
div {
 font-size: 1rem;
 height: 2rem;
 width: 3rem;
 border: .1rem solid #000;
}

采用以上寫法，div繼承到了html節點的font-size，為本身定義了一系列樣式屬性，此時1em計算為10px，即根節點的font-size值。所以，這時div的高度就是20px，寬度是30px，邊框是1px，字體大小則是10px；一旦有了這樣的方法，我們自然可以根據不同的屏幕寬度設置不同的根節點字體大小。假設我們現在設計的標準是iphone5s，iphone5系列的屏幕分辨率是640。為了統一規范，我們將iphone5 分辨率下的根元素font-size設置為100px;

html {
 font-size: 100px;
}

那么以此為基準，可以計算出一個比例值6.4。我們可以得知其他手機分辨率的設備下根元素字體大小：

/*
數據計算公式 640/100 = device-width / x  可以設置其他設備根元素字體大小
ihone5: 640  ： 100
iphone6: 750 : 117
iphone6s: 1240 : 194
*/
var deviceWidth = window.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + "px";

在head中，我們將以上代碼加入，動態地改變根節點的font-size值。
接下來我們可以根據根元素的字體大小用rem設置各種屬性的相對值。當然，如果是移動設備，屏幕會有一個上下限制，我們可以控制分辨率在某個范圍內，超過了該范圍，我們就不再增加根元素的字體大小了：

var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + "px";

一般的情況下，你是不需要考慮屏幕動態地拉伸和收縮。當然，假如用戶開啟了轉屏設置，在網頁加載之后改變了屏幕的寬度，那么我們就要考慮這個問題了。解決此問題也很簡單，監聽屏幕的變化就可以做到動態切換元素樣式：

window.onresize = function(){
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + "px";
 };

為了提高性能，讓代碼開起來更加完美，可以為它加上節流閥函數：

window.onresize = _.debounce(function() {
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + "px";
}, 50);

順帶解決高保真標注與實際開發值比例問題
如果你們設計稿標準是iphone5，那么拿到設計稿的時候一定會發現，完全不能按照高保真上的標注來寫css，而是將各個值取半，這是因為移動設備分辨率不一樣。設計師們是在真實的iphone5機器上做的標注，而iphone5系列的分辨率是640，實際上我們在開發只需要按照320的標準來。為了節省時間，不至于每次都需要將標注取半，我們可以將整個網頁縮放比例，模擬提高分辨率。這個做法很簡單，為不同的設備設置不同的meta即可:

var scale = 1 / devicePixelRatio;
document.querySelector("meta[name="viewport"]").setAttribute("content", "initial-scal

這樣設置同樣可以解決在安卓機器下1px像素看起來過粗的問題，因為在像素為1px的安卓下機器下，邊框的1px被壓縮成了0.5px了?？傊且粍谟酪?！淘寶和網易新聞的手機web端就是采用以上這種方式，自適應各種設備屏幕的，大家有興趣可以去參考參考。下面是完整的代碼:

讓元素飛起來-媒體查詢
運用css新屬性media query 特性也可以實現我們上說到過的布局樣式。為尺寸設置根元素字體大小:

@media screen and (device-width: 640px) { /*iphone4/iphon5*/
    html {
        font-size: 100px;
      }
    }
 
@media screen and (device-width: 750px) { /*iphone6*/
    html {
        font-size: 117.188px;
      }
    }
    @media screen and (device-width: 1240px) { /*iphone6s*/
      html {
        font-size: 194.063px;
      }
    }

這種方式也是可行的，缺點是靈活性不高，取每個設備的精確值需要自己去計算，所以只能取范圍值?？紤]設備屏幕眾多，分辨率也參差不齊，把每一種機型的css代碼寫出來是不太可能的。但是它也有優點，就是無需監聽瀏覽器的窗口變化，它會跟隨屏幕動態變化。媒體查詢的用法當然不僅僅像在此處這么簡單，相對于第二種自適應來說有很多地方是前者所遠遠不及的。最明顯的就是它可以根據不同設備顯示不同的布局樣式！請注意，這里已經不是改變字體和高度那么簡單了，它直接改變的是布局樣式！

@media screen and (min-width: 320px) and (max-width: 650px) { /*手機*/
  .class {
    float: left;
  }
}
 
@media screen and (min-width: 650px) and (max-width: 980px) { /*pad*/
  .class {
    float: right;
  }
}
 
@media screen and (min-width: 980px)  and (max-width: 1240px) { /*pc*/
  .class {
    float: clear;
  }
}

此種自適應布局一般常用在兼容PC和手機設備，由于屏幕跨度很大，界面的元素以及遠遠不是改改大小所能滿足的。這時候需要重新設計整界面的布局和排版了。
許多css框架經常用到這樣的多端解決方案，著名的bootstrap就是采用此種方式進行柵格布局的。