Vue：移動端 UI 如何做適配？

• 2019 年 12 月 10 日
• 筆記

目錄

• 三類法
• 三規則
• 為什麼選擇 iPhone6 做基準

本文大約 1000 字，閱讀 5 分鐘。

三類法：

將設備尺寸分成上中下三類

以前說 Android 機型複雜多樣，適配是一種噩夢，現在 iPhone 適配也不簡單了。iPhone 僅手機端就有這麼多尺寸：

每種尺寸都要單獨做一套 UI 及樣式嗎，顯然不現實。合理的做法是將設備尺寸分為三類，只處理三類尺寸。Android 適配亦是如此。

這是淘寶團隊使用的開發模式，大概分為四步：

一，視覺設計階段，設計師按寬度750px（iPhone 6）做設計稿。設計定稿後在750px的設計稿上做標註，輸出標註圖。同時等比放大1.5倍生成寬度1125px的設計稿，在1125px的稿子里切圖。 二，輸出兩個交付物給開發工程師：一個是程序用到的@3x切圖資源，另一個是寬度750px的設計標註圖 三，開發工程師拿到750px標註圖和@3x切圖資源，完成iPhone 6（375pt）的界面開發 四，適配調試階段，基於iPhone 6的界面效果，分別向上、向下調試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏適配。

上下調整三規則：

樣式適配規則

在第四步做樣式配置時，有三個規則：

文字流式，控件彈性，圖片等比縮放。

圖示：

如果所有尺寸下的圖片資源，都使用3倍圖，會不會有些浪費帶寬？有沒有辦法改進。還有，對於同樣的一個組件，如何優雅地處理其在三種尺寸下的具體樣式？

這裡有一個通用的分辨率樣式適配方法。

對於小於等於 320 pt 的設備，這樣處理樣式：

@media screen and (max-width: 320pt) {    ...  }

對於大於等於 414pt 的尺寸，這樣處理：

@media screen and (min-width: 414pt) {    ...  }

其它樣式，不在 media 之內的，便是普通默認樣式。設計師可以產出1倍、2倍、3倍圖三種，然後在每種 media 內，根據需要分別做不同的引用。

選誰做基準：

為什麼選擇 iPhone 6 作為基準？

一，從中間尺寸向上和向下適配的時候界面調整的幅度最小。 二，往上 iPhone 6 plus有兩種顯示模式，標準模式分辨率為1242×2208，放大模式分辨率為1125×2001（即iPhone 6的1.5倍），不適合做基準。 三，其它相依的兩個尺寸均不合適。1242×2208這個奇葩的數值是蘋果官方都不願意公開宣傳的一個分辨率，不便於記憶和計算柵格。640×1136雖然是廣泛應用的一個分辨率，但是大屏時代依然以小尺寸為設計基準顯然不合時宜。

參考鏈接：

• https://blog.csdn.net/kyl282889543/article/details/100542957
• https://zhuanlan.zhihu.com/p/65845357