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

移動端web開發相對於PC端web開發，我們可以慶幸不用相容那麼多瀏覽器了，但是隨之而來的卻是各種螢幕尺寸的適配，個人覺得，比PC端還要費精力。在使用了騰訊優測進行軟體測試後，問題得到了有效解決。

響應式佈局

簡而言之，就是頁面元素的位置隨著螢幕尺寸的變化而變化，通常會用百分比來定位，而在設計上需要預留一些可被“壓縮”的空間。

如上圖，其實就相當於頁面被壓矮了。

Cover佈局

就跟background-size的cover屬性一樣，保持頁面的寬高比，取寬或高之中的較小者佔滿螢幕，超出的內容會被隱藏。此佈局適用於主要內容集中在中部，邊沿無重要內容的設計。

如上圖，第一張是原設計稿，第二張把左右隱藏掉了一部分，第三張則是把上下隱藏掉了一部分。

Contain佈局

同樣，也跟background-size的contain屬性那樣，保持頁面的寬高比，取寬或高之中的較大者佔滿螢幕，不足的部分會用背景填充。個人比較推薦用這種方式，但在設計上需要背景為單色，或者是可平鋪的背景。

如上圖，紅框部分為原始寬高比，根據不同螢幕尺寸進行縮放，並加背景填充。

好了，接下來再說說常用的實現方法吧。

樣式縮放

最省事的適配方法，直接用px為單位按視覺進行開發，然後通過計算螢幕與網頁的寬高比，用transform:scale來對網頁進行全域性縮放。

不過此方法會有一個小問題，就是如果網頁內有動畫的話，縮放後會稍微降低頁面效能，在低配的安卓機器上表現的比較明顯，

Rem縮放

Rem是個好東西呀，誰用誰知道，這裡就不多做解釋了。原理跟上面的樣式縮放相通，只不過是通過Rem為單位來進行視覺開發，然後通過計算後改變html的front-size來對頁面進行縮放。

關於以Rem為單位進行開發，目前比較流行Font-size=62.5%，而後1rem=10px的這種方法，有試過直接換成px也是可以的，就看個人的計算習慣吧。

加入騰訊優測官方群 214483489 與大咖們分享技術與時訊！

文/騰訊 莫振中

_______________________________________________________________________________________

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