前言
随着移動裝置的普及，移動web在前端工程師們的工作中占有越來越重要的位置。移動裝置更新速度頻繁，手機廠商繁多，導緻的問題是每一台機器的螢幕寬度和分辨率不一樣。這給我們在編寫前端界面時增加了困難，适配問題在當下顯得越來越突出。記得剛剛開始開發移動端産品的時候向設計mm要了不同螢幕的設計圖，結果可想而知。本篇博文分享一些鹵煮處理多螢幕自适應的經驗，希望有益于諸君。
特别說明：在開始這一切之前，請開發移動界面的工程師們在頭部加上下面這條meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
簡單事情簡單做-寬度自适應
所謂寬度自适應嚴格來說是一種pc端的自适應布局方式在移動端的延伸。在處理pc端的前端界面時候需要用到全屏布局時采用的就是此種布局方式。它的實作方式也比較簡單，将外層容器元素按照百分比鋪滿地方式，裡面的子元素固定或者左右浮動。
.div {
width:100%; height:100px;
}
.child {
float: left;
float:right;
}
由于父級元素采用百分比的布局方式，随着螢幕的拉伸，它的寬度會無限的拉伸。而子元素由于采用了浮動，那麼它們的位置也會固定在兩端。該寬度自适應在新的時代有了新的方法，随着彈性布局的普及，它經常被flex或者box這樣的伸縮性布局方式替代，變得越來越“彈性”十足。需要了解彈性布局，請前往flex布局教程和鹵煮box布局教程比較。
大小之辨-完全自适應
“完全自适應式”是鹵煮對越此方案的叫法，由于鹵煮現在找不到官方名稱，是以暫時就這樣叫它。這種解決方案相對前一種來說進步不少，不僅僅寬度實作了自适應，而且界面所有的元素大小和高度都會根據不同分辨率和螢幕寬度的裝置來調整元素、字型、圖檔、高度等屬性的值。簡單來說就是在不同的螢幕下，你看到的字型和元素高寬度的大小是不一樣的。在這裡，有人就會說利用的是媒體查詢熟悉，根據不同的螢幕寬度，調整樣式。鹵煮之前也是這樣想的，但是你需要考慮到界面上的許多元素需要設定字型，如果用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;
<!--iphone5-->
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;
一般的情況下，你是不需要考慮螢幕動态地拉伸和收縮。當然，假如使用者開啟了轉屏設定，在網頁加載之後改變了螢幕的寬度，那麼我們就要考慮這個問題了。解決此問題也很簡單，監聽螢幕的變化就可以做到動态切換元素樣式:
window.onresize = function(){
document.documentelement.style.fontsize = (devicewidth / 6.4) + 'px';
};
為了提高性能，讓代碼開起來更加完美，可以為它加上節流閥函數:
window.onresize = _.debounce(function() {
}, 50);
順帶解決高保真标注與實際開發值比例問題
如果你們設計稿标準是iphone5，那麼拿到設計稿的時候一定會發現，完全不能按照高保真上的标注來寫css，而是将各個值取半，這是因為移動裝置分辨率不一樣。設計師們是在真實的iphone5機器上做的标注，而iphone5系列的分辨率是640，實際上我們在開發隻需要按照320的标準來。為了節省時間，不至于每次都需要将标注取半，我們可以将整個網頁縮放比例，模拟提高分辨率。這個做法很簡單，為不同的裝置設定不同的meta即可:
var scale = 1 / devicepixelratio;
document.queryselector('meta[name="viewport"]').setattribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
這樣設定同樣可以解決在安卓機器下1px像素看起來過粗的問題，因為在像素為1px的安卓下機器下，邊框的1px被壓縮成了0.5px了。總之是一勞永逸!淘寶和網易新聞的手機web端就是采用以上這種方式，自适應各種裝置螢幕的，大家有興趣可以去參考參考。下面是完整的代碼:
<!doctype html>
<html>
<head>
<title>測試</title>
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<script type="text/javascript">
(function() {
// deicepixelratio ：裝置像素
var scale = 1 / devicepixelratio;
//設定meta 壓縮界面 模拟裝置的高分辨率
document.queryselector('meta[name="viewport"]').setattribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
//debounce 為節流函數，自己實作。或者引入underscoure即可。
var resize = _.debounce(function() {
var devicewidth = document.documentelement.clientwidth > 1300 ? 1300 : document.documentelement.clientwidth;
//按照640像素下字型為100px的标準來，得到一個字型縮放比例值 6.4
document.documentelement.style.fontsize = (devicewidth / 6.4) + 'px';
}, 50);
window.onresize = resize;
})();
</script>
<style type="text/css">
html {
height: 100%;
width: 100%;
overflow: hidden;
font-size: 16px;
}
div {
height: 0.5rem;
widows: 0.5rem;
border: 0.01rem solid #19a39e;
........
</style>
<body>
<div>
</div>
</body>
</html>
讓元素飛起來-媒體查詢
運用css新屬性media query 特性也可以實作我們上說到過的布局樣式。為尺寸設定根元素字型大小:
@media screen and (device-width: 640px) { /*iphone4/iphon5*/
html {
font-size: 100px;
}
@media screen and (device-width: 750px) { /*iphone6*/
font-size: 117.188px;
@media screen and (device-width: 1240px) { /*iphone6s*/
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*/
float: right;
@media screen and (min-width: 980px) and (max-width: 1240px) { /*pc*/
float: clear;
此種自适應布局一般常用在相容pc和手機裝置，由于螢幕跨度很大，界面的元素以及遠遠不是改改大小所能滿足的。這時候需要重新設計整界面的布局和排版了:
如果螢幕寬度大于1300像素
如果螢幕寬度在600像素到1300像素之間，則6張圖檔分成兩行。
如果螢幕寬度在400像素到600像素之間，則導航欄移到網頁頭部。
許多css架構經常用到這樣的多端解決方案，著名的bootstrap就是采用此種方式進行栅格布局的。
總結
不管哪一種自适應方式，我們的目的是使得開發網頁在各種螢幕下變得好看：如果你的項目定位的使用者群僅僅是使用某種機型的人，那麼可以采用第一種自适應方式。如果你的客戶主要是移動端，但是客戶的裝置類型龐雜，建議采用第二種方式。如果你雄心勃勃地需要建立一套相容pc、pad、mobile多端的一體化web應用，那麼第三種選擇顯然是最适合你的。每種方式都有自己的利弊，根據需求權衡利害，合理地實作自适應布局，需要不停的實踐和摸索。路漫漫其修遠兮，吾将上下而求索。
參考資料
自适應網頁設計(responsive web design)
移動前端自适應解決方案和比較
移動web适配利器-rem
作者：佚名
來源：51cto