移動互聯網的興起，前端人員面臨的早已不僅僅是pc端的幾個主流尺寸的適應，還有碎片化極其嚴重的手機端，pad端。有些網站采取的方式是根據設備的不同提供不同的網頁，以滿足在各個設備的完美展示。但是這種方式也有很大的弊端，那就是增加了開發工作量和維護的工作量。如果是大型的網站，這種方式會大大增加成本。那么，前端工程師是否可以開發一套網頁來適應各種尺寸設備呢？答案是肯定的，自適應網頁設計就是我們目前來說比較優良的解決方案。
1.什么叫自適應？
自適應網頁設計是指：自動識別屏幕寬度或高度，并作出相應調整的網頁設計。
如何自適應
1.自適應網頁設計是基于瀏覽器允許網頁自動調整寬度。現在主流的瀏覽器都支持這一功能，包括一直讓前端工程師頭疼的IE系列，從IE9開始支持。IE8，IE7等老瀏覽器可以使用code.google.com/archive/p/css3-mediaqueries-js來支持。
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
viewport是視圖。上面代碼的意思是讓網頁的視圖寬度等于設備寬度，縮放比例為1（默認不縮放）
2.采用相對單位百分比或者rem替代絕對單位px。主要是以下幾方面：
a.寬度。比如說html,body等寬度設定為100%
b.高度。
c.字體使用rem
body{ ?width:100%;? ? height:100%;? ? font-size:625%;}
h1{? ? font-size:.14rem}
rem是相對單位，它和em相對父元素不同，是相對于根元素html。所以我們只需要設置html的字體大小。eg.
html{? ? font-size:625%; //(100px/16px)*100%=625%(這里設置了根元素的字體為100px)}
h1{? ? font-size:.14rem //.14rem*100 = 14px}
瀏覽器的根元素默認字體大小為16px。在上例中我們指定了html字體大小為100px，即可以認為1rem = 100px。所以，設定14px為0.14rem.
3.媒體查詢 (@media)
1.針對不同尺寸設置樣式 ?
@media screen and (max-width:475px) {
? ? ? ?body{background-color:black;//當屏幕寬度小于475px的時候，body的顏色變成黑色
}}
2.可以不同的媒體類型定義不同的樣式
<link rel="stylesheet" media="mediatype and|not|only(media feature)" ?href="my.css">
媒體查詢可以不同的媒體類型定義不同的樣式，也可以根據不同的屏幕尺寸定制樣式。將媒體查詢和第二點所說的rem單位配合起來，可以實現大部分的頁面自適應。
媒體查詢則可以根據屏幕尺寸的不同設置html的font-size；rem是相對于根元素html的相對單位。可以通過給html設置不同的font-size來規定1rem等于多少px。簡而言之，最后我們可以通過媒體查詢設置html的font-size來設置不同尺寸下1rem和1px的不同比例。eg：
html{
font-size:625%;//(100px/16px)*100%=625%(這里設置了根元素的字體為100px)
}
@media screen and (max-width:475px) {
html{background-color:500%;
;}
.container{height:2rem;}
上例中，在屏幕寬度大于475px的設備中，.container的實際高度為200px；而在屏幕寬度小于475px的設備中，.container的實際高度為160px。這樣，我們就通過了使用相對單位rem和媒體查詢實現了元素高度的自適應。
實用小建議
1.如何選擇是根據屏幕寬度自適應還是高度自適應？
大多數情況下都是根據寬度來定的。因為用戶一般更能接受縱向滾動條，而橫向滾動條是要盡量避免的。
根據需求的不同有時候也需要選擇根據高度自適應。例如：需要不論是什么屏幕都是一屏展示完，而不需要縱向滾動條。
2.按需用上max-width，min-width，max-height，min-height。給元素設定寬度或者高度的邊界值，以防止在過小的屏幕或者過大屏幕上的失常表現。
