為什么80%的碼農都做不了架構師？>>> ??

上篇談到了一些基礎概念：屏幕密度、邏輯像素什么的，接下來繼續探討

常見設備尺寸

更全的數據請參考Google 統計

說明：圖中的 iPhone 6 Plus 數據看起來有些蹊蹺，414 x 736 * 3 = 1242 x 2208，而物理像素卻是 1080 x 1920 ，這是為何？實際上 iPhone 6 Plus 渲染出的圖片尺寸為 1242 x 2208 px，但屏幕只有 1080 x 1920 px，所以系統會對渲染出的圖進行壓縮。

附：iOS對歡迎頁的尺寸說明

從表中數據可以看出：

雖然物理像素各種各樣，但是邏輯像素還是相對統一的。

邏輯像素相接近的，屏幕尺寸也比較接近。

實際上，邏輯像素就是為了使 UI 在不同的屏幕上的表現一致。即：相同單位的邏輯像素，在不同的屏幕上的物理尺寸相同。來張圖吧，一圖勝前言。

UI 元素的高度為200邏輯像素，在倍率為1的屏幕上，高度為200 px，在倍率為2的屏幕上，高度為400px；但他們的物理尺寸都是一樣的。

說了這么多，該切入正題了！

如何適配

前面做了很多鋪墊，邏輯像素、倍率等等，是時候展現他們的用武之地咯

• 為不同倍率的屏幕提供對應的圖片資源

iOS 平臺的 @2X ,?@3X?

Android 平臺的 drawable-mdpi , drawable-hdpi , drawable-xhdpi , drawable-xxhdpi 等等

Web 平臺，JavaScript 根據倍率請求不同的圖片

• 使用邏輯像素作為 UI 元素的長度單位

iOS : pt , Android : dp , Web : px

• 為不同尺寸的屏幕提供不同的布局

Android 平臺支持根據尺寸來選用不同的布局，其他平臺不太清楚。題外話：比如 適配平板和手機，國內大部分的應用都是一套布局，平板就是手機的放大版，可能大部分團隊都疲于產品的迭代吧。Google 的應用在這塊做的是標桿。

?

各個平臺的一些細節肯定有些區別，但是原理如上所述。

下篇將講一講：如何讓設計師和攻城獅更好的協同作業

轉載于:https://my.oschina.net/yinjq/blog/528452

總結

以上是生活随笔為你收集整理的移动端 UI 适配最佳实践（中）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。