當我們說到適配方案的時候越來越多的人會潛意識的翻譯成移動端適配方案。確實是這樣，在移動端蓬勃發展的今天，移動端的適配顯得尤為重要。PC應用的適配已經不是適配方案主要需要考慮的了，隨著移動網際網路的來臨，追求移動端的完美展示才是王道。
最近也在做一些活動頁面的開發，對於網上的一些適配方案調研了一下，大致有百分比、媒體查詢@media、rem等三種主流方案。下面對這幾種方法做一些簡單的整理，作為菜鳥肯定有很多的錯誤，希望大家指正，祝我早日走向人生巔峰。

百分比適配

百分比適配應該是最久遠、最容易想到的一種適配方案。按照視覺的設計稿，根據展示元素的大小和位置進行百分比的換算，比如：視覺搞的寬度是720px，圖片的寬度是360px，那麼在設定圖片的時候就需要將width設為50%。
對於這種百分比的適配你一定會說，在不同的解析度下圖片會出現拉伸變形，影響使用者體驗。沒有錯，確實會這樣，所以就需要我們在展示圖片的時候儘可能不使用，而是使用div的background-image來實現圖片，並且設定相關的屬性：background-size、background-position和background-repeat來實現圖片，這裡不是今天要總結的重點，所以就不細說了。通過一系列的屬性設定之後，你會發現在圖片並不會隨著解析度的不同而變形。

但是你會發現圖片的高度會根據div的高度收到顯示，當螢幕高度很小的時候會出現很多空餘空間。就像這樣，

這就是使用百分比是的問題，百分比適配的方案在對頁面展示環境沒有約束的情況下比較實用，比如你的頁面可能在瀏覽器開啟，也可能在產品內開啟，或者以閃屏的形式展現，這時候使用百分比，你就不用再考慮頁面能否一螢幕完全顯示的問題了。

媒體查詢media

media無疑是目前使用最多的適配方案，最為響應式佈局的扛把子，媒體查詢有著其獨特的魅力。簡潔易懂的css語句，使得移動端適配有了新的方向。我們再也不用去考慮百分比了，也不用擔心頁面元素會拉伸變形了。
媒體查詢的適配思路簡單的來說就是在某一段區域內以一個特定的尺寸顯示元素。就像是一塊地盤內只有一個老大，大家出來混的當然都聽他的。使用media來指定適配的媒體介質，使用screen較多，但你會發現其實如果你的頁面不需要對列印方式有過多考慮時省略screen完全沒問題，使用@media screen和min、max的結合使用來實現響應式佈局。比如下面程式碼：
body{background:#000000;}
@media screen and (max-width:480px){body{background:red;}}/寬度小於480px時 綠色

/
@media screen and (min-width:980px){body{background:yellow;}}/寬度大於980px時 紅色/

這裡預設的背景是黑色，當螢幕小於480px的時候頁面會變成綠色的，當螢幕大於980px的時候頁面會變成紅色。效果我就不上圖了，很簡單的例子。這樣就完成了一頁簡單的響應式媒體查詢的頁面，大致的思路就是這樣了。
使用媒體查詢在css中會需要增加很多的不同解析度的樣式程式碼，可能會覺得有很多冗餘，但是毫無疑問，媒體查詢離我們理想中的適配方案已經很近了。那麼還有什麼更優秀的方法嗎？

後起新秀rem

把rem說成後起之秀還是有點不恰當的，如果你在網上查一下就可以發現rem代表的意思是根元素字型大小，而且你會發現原來各大主流瀏覽器早就規定好了預設的font-size是16px，也就是說你不用在擔心使用rem的過程中會出現瀏覽器版本相容性的問題了，是不是很開心？
rem的使用其實也可以看成百分比的一種衍生。當你使用rem是，你會發現根據根元素的font-size的不同，頁面的rem顯示的尺寸也是不同的。網上有很多關於rem尺寸的問題，水平有限，就不把大家往坑裡帶了，自己看大神的講解吧。首先我們需要在html中設定根字型大小，
html{

font-size:62.5%;

}

這樣就把預設的根字型大小設為10px了，62.5%=10/16*100%。在設定好預設字型大小之後，我們就可以使用rem來設定元素屬性了。比如
.test{top:5rem;}
到這你會發現rem也很麻煩啊，有這功夫我直接用百分比了。沒有錯，這樣確實是很麻煩的，知道我找到了一個hotcss，使用hotcss後就再也不用擔心這個問題了，我們完全就按照視覺給的尺寸設定就可以了。
就個人來講還是比較喜歡rem來進行適配的，但是在使用@keyframes實現動畫效果的時候，有個問題把我坑慘了。在頁面載入並立刻執行動畫的時候你會發現圖片會有一個從小變大的過程，雖然動畫效果還是有的，但是我們並不希望圖片有這樣一個變化的過程。那麼這是為什麼呢？仔細觀察後我發現頁面出現圖片的這種變化是因為瀏覽器會把rem轉成相應的px，然後再載入（僅是個人理解，網上沒有找到相關的說法）。當頁面從css檔案中讀取相應的屬性時，會有一個轉換的過程，雖然這個過程很短，但是如果你的動畫在頁面進入時就載入動畫還是能夠看到這個過程的。我的笨方法就是給瀏覽器一點解析時間，或者動畫延遲一點時間。

viewport

通過對mata中viewport的scale設定，也可以實現適配，這個適配方案是我無意中找到的，頁面地址由於沒有儲存丟失了，很可惜。其實，我也只是做了一個簡單的demo，有興趣的可以看一下。這種方法說白了就是把你的設計稿和手機螢幕解析度做一個比例縮放，連文字大小也會根據比例縮放。

簡單的總結了一下自己所瞭解的適配方案，水平有限，有錯誤的地方希望大家多多指教了。