談談移動端屏幕適配的幾種方法

文/騰訊 莫振中

移動端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也是能夠的，就看我的的計算習慣吧。

 

想了解更多幹貨，歡迎關注騰訊優測微信號：優測網（wxutest）

騰訊優測：

騰訊優測是備受客戶信賴的移動雲測試平臺，爲應用、遊戲，H5混合應用的研發團隊提供產品質量檢測與問題解決服務。不只在線上平臺提供「雲手機遠程操控與調試」、「自動化全面兼容性測試」、「APK源碼級缺陷性分析」等多種質量檢測工具，更爲VIP客戶配備專家團隊提供定製化綜合測試解決方案。真機實驗室配備上千款手機，覆蓋市面98%主流機型，7*24小時在線運行，覆蓋億級用戶。