談談移動端屏幕適配的幾種方法
移動端web開發相對於PC端web開發，我們可以慶幸不用兼容那么多瀏覽器了，但是隨之而來的卻是各種屏幕尺寸的適配，個人覺得，比PC端還要費精力。在使用了騰訊優測進行軟件測試后，問題得到了有效解決。
響應式布局
簡而言之，就是頁面元素的位置隨着屏幕尺寸的變化而變化，通常會用百分比來定位，而在設計上需要預留一些可被“壓縮”的空間。
如上圖，其實就相當於頁面被壓矮了。
Cover布局
就跟background-size的cover屬性一樣，保持頁面的寬高比，取寬或高之中的較小者占滿屏幕，超出的內容會被隱藏。此布局適用於主要內容集中在中部，邊沿無重要內容的設計。
如上圖，第一張是原設計稿，第二張把左右隱藏掉了一部分，第三張則是把上下隱藏掉了一部分。
Contain布局
同樣，也跟background-size的contain屬性那樣，保持頁面的寬高比，取寬或高之中的較大者占滿屏幕，不足的部分會用背景填充。個人比較推薦用這種方式，但在設計上需要背景為單色，或者是可平鋪的背景。
如上圖，紅框部分為原始寬高比，根據不同屏幕尺寸進行縮放，並加背景填充。
好了，接下來再說說常用的實現方法吧。
樣式縮放
最省事的適配方法，直接用px為單位按視覺進行開發，然后通過計算屏幕與網頁的寬高比，用transform:scale來對網頁進行全局縮放。
不過此方法會有一個小問題，就是如果網頁內有動畫的話，縮放后會稍微降低頁面性能，在低配的安卓機器上表現的比較明顯，iOS上沒發現有性能問題。
Rem縮放
Rem是個好東西呀，誰用誰知道，這里就不多做解釋了。原理跟上面的樣式縮放相通，只不過是通過Rem為單位來進行視覺開發，然后通過計算后改變html的front-size來對頁面進行縮放。
關於以Rem為單位進行開發，目前比較流行Font-size=62.5%，而后1rem=10px的這種方法，有試過直接換成px也是可以的，就看個人的計算習慣吧。