移動互聯(lián)網(wǎng)的興起榛搔，前端人員面臨的早已不僅僅是pc端的幾個主流尺寸的適應诺凡，還有碎片化極其嚴重的手機端，pad端践惑。有些網(wǎng)站采取的方式是根據(jù)設備的不同提供不同的網(wǎng)頁腹泌，以滿足在各個設備的完美展示。但是這種方式也有很大的弊端尔觉，那就是增加了開發(fā)工作量和維護的工作量凉袱。如果是大型的網(wǎng)站，這種方式會大大增加成本穷娱。那么绑蔫，前端工程師是否可以開發(fā)一套網(wǎng)頁來適應各種尺寸設備呢？答案是肯定的泵额，自適應網(wǎng)頁設計就是我們目前來說比較優(yōu)良的解決方案配深。
1.什么叫自適應？
自適應網(wǎng)頁設計是指：自動識別屏幕寬度或高度嫁盲，并作出相應調(diào)整的網(wǎng)頁設計篓叶。
如何自適應
1.自適應網(wǎng)頁設計是基于瀏覽器允許網(wǎng)頁自動調(diào)整寬度×衣樱現(xiàn)在主流的瀏覽器都支持這一功能，包括一直讓前端工程師頭疼的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是視圖矫限。上面代碼的意思是讓網(wǎng)頁的視圖寬度等于設備寬度，縮放比例為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">
媒體查詢可以不同的媒體類型定義不同的樣式冰悠，也可以根據(jù)不同的屏幕尺寸定制樣式堡妒。將媒體查詢和第二點所說的rem單位配合起來，可以實現(xiàn)大部分的頁面自適應溉卓。
媒體查詢則可以根據(jù)屏幕尺寸的不同設置html的font-size皮迟；rem是相對于根元素html的相對單位∩Ｕ可以通過給html設置不同的font-size來規(guī)定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和媒體查詢實現(xiàn)了元素高度的自適應故河。
實用小建議
1.如何選擇是根據(jù)屏幕寬度自適應還是高度自適應？
大多數(shù)情況下都是根據(jù)寬度來定的吆豹。因為用戶一般更能接受縱向滾動條鱼的，而橫向滾動條是要盡量避免的理盆。
根據(jù)需求的不同有時候也需要選擇根據(jù)高度自適應。例如：需要不論是什么屏幕都是一屏展示完凑阶，而不需要縱向滾動條猿规。
2.按需用上max-width，min-width宙橱，max-height姨俩，min-height。給元素設定寬度或者高度的邊界值师郑，以防止在過小的屏幕或者過大屏幕上的失常表現(xiàn)哼勇。
