移動端適配

實習期間主要在寫微信端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來作計算的，由此對不一樣屏幕尺寸進行適配。

神器。之後的項目應該都會使用這個方案。

博客首發地址：https://www.jianshu.com/u/13cd86311525