騰訊優測優分享 | 談談移動端屏幕適配的幾種方法

騰訊優測是專業的移動雲測試平臺，自動化測試提供全面兼容性適配測試，雲真機提供遠程真機租用服務，優分享不定時提供大量移動研發及測試相關乾貨！

移動端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也是能夠的，就看我的的計算習慣吧。
加入騰訊優測官方羣 214483489 與大咖們分享技術與時訊！

文/騰訊 莫振中
_騰訊優測是專業的移動雲測試平臺，爲應用、遊戲、H5混合應用的研發團隊提供產品質量檢測與問題解決服務。不只在線上平臺提供自動化兼容性測試、雲手機遠程租用與調試、漏洞分析、自動化測試工具Xtest等多種質量檢測工具，更爲VIP客戶配備了專家團隊提供定製化綜合測試解決方案。