特別說明：在開始這一切之前，請開發(fā)移動界面的工程師們在頭部加上下面這條meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
簡單事情簡單做-寬度自適應(yīng)所謂寬度自適應(yīng)嚴(yán)格來說是一種PC端的自適應(yīng)布局方式在移動端的延伸压语。在處理PC端的前端界面時候需要用到全屏布局時采用的就是此種布局方式。它的實現(xiàn)方式也比較簡單，將外層容器元素按照百分比鋪滿地方式冠胯，里面的子元素固定或者左右浮動嗡善。
.div { width:100%; height:100px;}
.child { float: left; }
.child { float:right;}
由于父級元素采用百分比的布局方式岗宣，隨著屏幕的拉伸热某，它的寬度會無限的拉伸。而子元素由于采用了浮動园细，那么它們的位置也會固定在兩端惦积。該寬度自適應(yīng)在新的時代有了新的方法，隨著彈性布局的普及猛频，它經(jīng)常被flex或者box這樣的伸縮性布局方式替代狮崩，變得越來越“彈性”十足。
需要了解彈性布局鹿寻，請前往Flex布局教程和鹵煮box布局教程比較睦柴。大小之辨-完全自適應(yīng)“完全自適應(yīng)式”是鹵煮對越此方案的叫法，由于鹵煮現(xiàn)在找不到官方名稱毡熏，所以暫時就這樣叫它坦敌。這種解決方案相對前一種來說進(jìn)步不少，不僅僅寬度實現(xiàn)了自適應(yīng)痢法，而且界面所有的元素大小和高度都會根據(jù)不同分辨率和屏幕寬度的設(shè)備來調(diào)整元素狱窘、字體、圖片财搁、高度等屬性的值蘸炸。簡單來說就是在不同的屏幕下，你看到的字體和元素高寬度的大小是不一樣的妇拯。
在這里幻馁，有人就會說利用的是媒體查詢洗鸵，根據(jù)不同的屏幕寬度越锈，調(diào)整樣式仗嗦。鹵煮之前也是這樣想的，但是你需要考慮到界面上的許多元素需要設(shè)置字體甘凭，如果用media query為每個元素在不同的設(shè)備下都設(shè)置不同的屬性的話稀拐，那么有多少種屏幕我們的css就會增加多少倍。
實際上在這里丹弱，我們采用的是js和css熟悉rem來解決這個問題的德撬。REM屬性指的是相對于根元素設(shè)置某個元素的字體大小。它同時也可以用作為設(shè)置高度等一系列可以用px來標(biāo)注的單位躲胳。
html {font-size: 10px;}
div {font-size: 1rem;height: 2rem;width: 3rem;border: .1rem solid #000;}
采用以上寫法蜓洪，div繼承到了html節(jié)點(diǎn)的font-size，為本身定義了一系列樣式屬性坯苹，此時1em計算為10px隆檀，即根節(jié)點(diǎn)的font-size值。所以粹湃，這時div的高度就是20px恐仑，寬度是30px，邊框是1px为鳄，字體大小則是10px裳仆；一旦有了這樣的方法，我們自然可以根據(jù)不同的屏幕寬度設(shè)置不同的根節(jié)點(diǎn)字體大小孤钦。
假設(shè)我們現(xiàn)在設(shè)計的標(biāo)準(zhǔn)是iphone5s歧斟，iphone5系列的屏幕分辨率是640。為了統(tǒng)一規(guī)范偏形，我們將iphone5 分辨率下的根元素font-size設(shè)置為100px;
html {font-size: 100px;}
那么以此為基準(zhǔn)静袖，可以計算出一個比例值6.4。我們可以得知其他手機(jī)分辨率的設(shè)備下根元素字體大小:
var deviceWidth = window.documentElement.clientWidth;document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
在head中壳猜，我們將以上代碼加入勾徽，動態(tài)地改變根節(jié)點(diǎn)的font-size值，得到如下結(jié)果:![淺談Web自適應(yīng)(三種方法)
(http://cdn.attach.qdfuns.com/notes/pics/201612/02/163942hfeyaarfyzz7zfzh.jpg)接下來我們可以根據(jù)根元素的字體大小用rem設(shè)置各種屬性的相對值统扳。當(dāng)然喘帚，如果是移動設(shè)備，屏幕會有一個上下限制咒钟，我們可以控制分辨率在某個范圍內(nèi)吹由，超過了該范圍，我們就不再增加根元素的字體大小了:
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
一般的情況下朱嘴，你是不需要考慮屏幕動態(tài)地拉伸和收縮倾鲫。當(dāng)然粗合，假如用戶開啟了轉(zhuǎn)屏設(shè)置，在網(wǎng)頁加載之后改變了屏幕的寬度乌昔，那么我們就要考慮這個問題了隙疚。解決此問題也很簡單，監(jiān)聽屏幕的變化就可以做到動態(tài)切換元素樣式:
window.onresize = function(){ var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';};
為了提高性能磕道，讓代碼開起來更加完美供屉，可以為它加上節(jié)流閥函數(shù):
window.onresize = _.debounce(function() { var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';}, 50);
順帶解決高保真標(biāo)注與實際開發(fā)值比例問題如果你們設(shè)計稿標(biāo)準(zhǔn)是iphone5，那么拿到設(shè)計稿的時候一定會發(fā)現(xiàn)溺蕉，完全不能按照高保真上的標(biāo)注來寫css伶丐，而是將各個值取半，這是因為移動設(shè)備分辨率不一樣疯特。設(shè)計師們是在真實的iphone5機(jī)器上做的標(biāo)注哗魂，而iphone5系列的分辨率是640，實際上我們在開發(fā)只需要按照320的標(biāo)準(zhǔn)來漓雅。
為了節(jié)省時間录别，不至于每次都需要將標(biāo)注取半，我們可以將整個網(wǎng)頁縮放比例故硅，模擬提高分辨率庶灿。這個做法很簡單，為不同的設(shè)備設(shè)置不同的meta即可:
var scale = 1 / devicePixelRatio;document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
這樣設(shè)置同樣可以解決在安卓機(jī)器下1px像素看起來過粗的問題吃衅，因為在像素為1px的安卓下機(jī)器下往踢，邊框的1px被壓縮成了0.5px了∨遣悖總之是一勞永逸峻呕！淘寶和網(wǎng)易新聞的手機(jī)web端就是采用以上這種方式，自適應(yīng)各種設(shè)備屏幕的趣效，大家有興趣可以去參考參考瘦癌。下面是完整的代碼:html 代碼
<!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 ：設(shè)備像素
var scale = 1 / devicePixelRatio;
//設(shè)置meta 壓縮界面 模擬設(shè)備的高分辨率
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
//debounce 為節(jié)流函數(shù)，自己實現(xiàn)跷敬⊙端剑或者引入underscoure即可。
var reSize = _.debounce(function() {
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
//按照640像素下字體為100px的標(biāo)準(zhǔn)來西傀，得到一個字體縮放比例值 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;
讓元素飛起來-媒體查詢運(yùn)用css新屬性media query 特性也可以實現(xiàn)我們上說到過的布局樣式斤寇。為尺寸設(shè)置根元素字體大小:
@media screen and (device-width: 640px) { html { font-size: 100px; } }@media screen and (device-width: 750px) { html { font-size: 117.188px; } }@media screen and (device-width: 1240px) { html { font-size: 194.063px; } }
這種方式也是可行的，缺點(diǎn)是靈活性不高拥褂，取每個設(shè)備的精確值需要自己去計算娘锁，所以只能取范圍值〗染椋考慮設(shè)備屏幕眾多莫秆，分辨率也參差不齊间雀，把每一種機(jī)型的css代碼寫出來是不太可能的。
但是它也有優(yōu)點(diǎn)镊屎，就是無需監(jiān)聽瀏覽器的窗口變化惹挟，它會跟隨屏幕動態(tài)變化。媒體查詢的用法當(dāng)然不僅僅像在此處這么簡單杯道，相對于第二種自適應(yīng)來說有很多地方是前者所遠(yuǎn)遠(yuǎn)不及的匪煌。最明顯的就是它可以根據(jù)不同設(shè)備顯示不同的布局樣式责蝠！
請注意党巾，這里已經(jīng)不是改變字體和高度那么簡單了，它直接改變的是布局樣式霜医！@media screen and (min-width: 320px) and (max-width: 650px) { .class { float: left; }}
@media screen and (min-width: 650px) and (max-width: 980px) { .class { float: right; }}
@media screen and (min-width: 980px) and (max-width: 1240px) { .class { float: clear; }}
此種自適應(yīng)布局一般常用在兼容PC和手機(jī)設(shè)備齿拂，由于屏幕跨度很大，界面的元素以及遠(yuǎn)遠(yuǎn)不是改改大小所能滿足的肴敛。這時候需要重新設(shè)計整界面的布局和排版了:如果屏幕寬度大于1300像素![淺談Web自適應(yīng)(三種方法)]
(http://cdn.attach.qdfuns.com/notes/pics/201612/02/163942oave3gugrdgyvx3z.jpg)如果屏幕寬度在600像素到1300像素之間署海，則6張圖片分成兩行。
許多css框架經(jīng)常用到這樣的多端解決方案，著名的bootstrap就是采用此種方式進(jìn)行柵格布局的镀梭。
總結(jié)不管哪一種自適應(yīng)方式刀森，我們的目的是使得開發(fā)網(wǎng)頁在各種屏幕下變得好看：如果你的項目定位的用戶群僅僅是使用某種機(jī)型的人，那么可以采用第一種自適應(yīng)方式报账。如果你的客戶主要是移動端研底，但是客戶的設(shè)備類型龐雜，建議采用第二種方式透罢。如果你雄心勃勃地需要建立一套兼容PC榜晦、PAD、mobile多端的一體化web應(yīng)用羽圃，那么第三種選擇顯然是最適合你的乾胶。每種方式都有自己的利弊，根據(jù)需求權(quán)衡利害朽寞，合理地實現(xiàn)自適應(yīng)布局识窿，需要不停的實踐和摸索。路漫漫其修遠(yuǎn)兮愁憔，吾將上下而求索腕扶。
