實習期間主要在寫微信端H5，遇到的最大問題就是適配各個不同尺寸的屏幕。公司就我自己一個前端，只能自己摸索着來。
方法1：媒體查詢
這是最笨工作量最大的方法了，就是一個屏幕尺寸一個屏幕尺寸的適配，當然你沒辦法適配到所有的手機型號，有的手機比較奇葩，同樣是5.5寸，有的矮胖，有的瘦高。我的方法是以iphone6為准，然后向上適配5.5寸，向下適配4.7的iphone5，這個時候就能自適應市場上的一些主流屏幕，然后在對其他品牌手機挑一部分手動適配。
對於工作量小的項目，這個方法還是簡單有效的，當然沒辦法覆蓋所有設備，只是一個沒辦法的辦法，這樣做其實很痛苦，工作量也大。
方法2：定高不定寬
對於流式布局的頁面，我們只要把寬度設置為百分比，而高度設置為px，這樣寬度就可以自適應，高度由於是流式布局，損失一點美感，再搭配簡單的媒體查詢，不會對布局造成太大的影響。
不過我在工作中寫的最多的是一些比較不常規的頁面，比如下面的這個蛋和錘子都是用絕對定位放上去的，這個時候不管是寬度還是高度都得照顧到。
剛開始我為了讓這顆蛋乖乖待在一個位置，用媒體查詢寫了好多位置和大小寬度，費時費力。
方法3：神奇的 vh、vw
css3新增的單位，相對於視窗的寬度或高度，100vh代表整個可視區域，不包括標題欄狀態欄底欄等區域，詳細的可以看一下張鑫旭大神的文章 視區相關單位vw, vh..簡介以及可實際應用場景。
兼容性較差，有一些瀏覽器不支持，很明顯微信內置的瀏覽器並不支持這個單位，撲街！
方法4：flexible
眾里尋他千百度，驀然回首，那人卻在燈火闌珊處。
在很早之前找解決方案的時候就看到這篇文章了——使用Flexible實現手淘H5頁面的終端適配。
當時工作趕得比較緊（其實是自己懶沒仔細看），以為要用到grunt還需要打包發布，是用在手淘這種大項目，不適合自己搗鼓的小頁面，所以就略過了......
后來找個時間好好拜讀了之前的那篇文章，其實只需要導入一個 js 庫就可以使用了。
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
原理文章里寫得很清楚，我就不廢話了。簡單講就是用 js 動態改變 <meta> 標簽，然后用rem作為單位，因為rem就是根據font-size來做計算的，由此對不同屏幕尺寸進行適配。
神器。以后的項目應該都會使用這個方案。