螢幕適配是一個很容易被忽略的問題，但對於精益求精的產品而言，是必不可少的。對於Web開發的求職者而言，也是一個必需要理解清楚的經典問題
首發於微信公眾號（啃先生）
壹 | Fisrt
移動端適配的是什麼？
我們討論的是網頁適配多種尺寸螢幕，讓網頁效果看起來和設計師的設計稿一樣。說白了就是同一套程式碼在不同解析度的手機上跑時，頁面元素間的間距，留白，以及圖片大小會隨著變化，在比例上跟設計稿一致。
舉個粟子吧
圖1. 260*400的螢幕
圖2. 380*400的螢幕
上邊的頁面在不同大小螢幕上的展現，咋一看沒什麼問題，一般的工程師會認為已經OK了，所以前端工程師很容易忽略螢幕適配。但是對於一些精益求精的產品而言，這還達不到要求。例如有以下問題：
- 圖1的螢幕的尺寸較小，因此頭像應該小些，話題左邊的空白也應該小一些。
- 圖片應該保持正方形，而且兩張圖之間的邊距應該隨螢幕變化而變化
明白了，所以padding，margin，圖片等的大小基本都要做適配
貳 | Second
那有什麼方法可以做到這種適配？
關鍵要找到一種長度單位，使得一樣的取值，在不同尺寸的螢幕上的大小按比例縮放。
長度單位我只知道px ?
我將在下一期的文章裡推有關viewport和css畫素px中的細節，這篇文章只關注如何適配，所以先只談結論：
- 網頁在viewport中佈局，viewport被分成一個個小方塊，一個CSS畫素佔一個方塊
- 在設定了viewport寬度等於裝置寬度的情況下，通過某種演算法，在不同大小的螢幕上，1個CSS畫素所佔螢幕的物理尺寸是一樣大的
既然1個CSS畫素在不同螢幕上物理尺寸一樣大，那px肯定不能做為適配的方法了
長度單位rem是相對於html標籤的font-size來計算的。例如html標籤設定font-size:36px，同時div設定width:1.2rem。那麼這個div的寬度就是1.2rem=36px*1.2=43.2px
如上面的例子，如果載入頁面的時候，使用JS根據螢幕的大小動態設定html標籤的font-size，隨著html標籤font-size的值變化，div的1.2rem換算成px的值 也跟著變化，即實現了div隨螢幕大小變化而變化，而CSS程式碼始終是width:1.2rem。以此類推到頁面所有的元素。
明白了，奧祕就在於結合px的固定尺寸和rem的相對尺寸！
叄 | Third
啃先生，原理我明白了，你有沒有可執行的具體方案 ?？
業內比較流行的做法（參考阿里的flexible），有以下要點：
- 設定viewport為裝置寬度（這裡不一定，但目前先這樣足矣）
- 將viewport分成10rem，並計算出1rem在當前瀏覽器的畫素值，把它賦予html標籤的font-size（分成10rem只是為了方便計算而已）
- 寫CSS程式碼時，遇到要適配的地方，比如width，margin，padding等，就不要再用px了，改成用rem
JS和Html程式碼如下：
CSS程式碼做了類似如下的修改：
執行結果如下：邊距和頭像圖片都隨螢幕變化而變化了
肆 | Fourth
程式碼量很少，就是要理解消化。有一個問題，設計師給的設計稿尺寸單位都是用px，但是剛剛說的第3步，寫CSS的時候要用rem，這個怎麼換算？會很麻煩
現有設計師提供寬度為400px的設計稿，其中某個圖片的寬度設計為20px，那麼，CSS的寫法就是img{width: 0.05rem;}，怎麼得出這個結果的呢？
- 設計稿的寬度視同手機寬度，即假設有一個viewport為400px的手機
- 將它分成10rem，每個rem為40px;
- 那麼圖片寬度20px自然就是0.5rem;
且慢，豈不是意味著，每次寫到尺寸的地方，我都要先在草稿紙上把設計師給的px換算成rem？別急，sublime text 3有一款外掛可以幫助你進行這個換算，你只需要輸入20px，它會自動幫你換算成 0.5rem，看以下圖就秒懂了
參考
- 使用Flexible實現手淘H5頁面的終端適配（https://github.com/amfe/article/issues/17）
- 移動端高清、多屏適配方案（http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041）
- A tale of two viewports（http://www.quirksmode.org/mobile/viewports.html）
移動適配這個會作為一個小系列來寫，下期寫瀏覽器是怎麼計算CSS畫素的，它在不同螢幕上的差異。
啃先生 開始碼字才知道碼字不易，堅持碼字更不易。轉載請宣告來源
如果覺得文章有用，順手點選下方的推薦