推薦閱讀

之前網(wǎng)頁端的適配和響應式輸出了不少，但是移動端的適配方法卻和網(wǎng)頁端有一定的差異，不能直接套用。加上最近關于移動端適配的學員問題有很多，所以我干脆匯總一篇移動端的適配方法出來，徹底解決大家在這方面的疑問。

因為移動端適配是若干零碎問題和場景的合集，所以我會根據(jù)幾個不同的疑問展開說明。

1. 不同屏幕大小的適配邏輯
2. 不同像素密度的適配方式
3. 安卓和蘋果的適配做法
4. 手機端和平板的適配規(guī)范
5. 設計交付中的適配說明

不同屏幕大小的適配邏輯

首先適配的第一個問題，就是面對手機屏幕大小不一，顯示畫布尺寸不同的問題。以 iPhone 舉例，在 UI 設計軟件中可以創(chuàng)建的尺寸就有好幾種：

安卓手機就更不用說了，相關規(guī)格列三天三夜也列不完。屏幕規(guī)格那么多，自然不可能設計時每個規(guī)格都輸出一套界面，前端開發(fā)更不可能每個規(guī)格都單獨寫一套樣式。所以必須應用一種技術和邏輯，只需要開發(fā)一套界面樣式就能自動適配所有設備，這就是移動端的屏幕適配規(guī)則。

按常規(guī)理解的話，屏幕適配不就是根據(jù)尺寸或分辨率等比縮放就可以了。再想遠一點，如果比例不一樣怎么辦，簡單，保持寬度一致可以上下滾動就行了。

這種做法是可以實現(xiàn)，但是多數(shù)情況下是不合理的，因為手機屏幕變大意味著更大的空間可以容納更多信息，而不止是把小屏幕的內(nèi)容放大而已。

所以移動端的屏幕適配，除了等比放大以外，還包括對齊模式、尺寸適應兩個要素。

對齊模式就是元素和父級圖層的對齊關系，比如頂部的標題欄和底部導航，就是基于窗口（上級圖層）的上對齊和下對齊，不管這個窗口當前多大，它們都分別處于最頂端和最底端。

除了上下左右對齊外，對齊關系也可以是上左、上右、下左、下右，且對齊并不一定得是邊緣完全貼合，可以是預留一個固定的數(shù)值。比如一個在右下角的懸浮標簽，它基于上級畫布右間距為零，下方邊緣間距為 120px，那么效果如下所示：

對齊是一種相對關系，除了上級畫布以外，也可以是上級的組件視圖，比如一個標題欄內(nèi)包含返回按鈕、頁面標題、更多按鈕，它們分別基于組件視圖左、中、右對齊，那么組件不管怎么放大，它們的關系也保持不變。

尺寸適應則是元素對于上、下級元素尺寸的響應邏輯，一種是根據(jù)上級元素預留的空間填充，另一種是根據(jù)下級元素的尺寸變動。

比如在上方的案例中，標題欄的寬就基于畫布變大而變大，因為畫布沒有設置左右內(nèi)間距（Padding），所以它是撐滿的狀態(tài)。而有些情況，上級元素則會添加內(nèi)間距，則下級的元素寬就會受到影響。比如一個模態(tài)彈窗設置了左右 20px 的內(nèi)間距，那么預留給段落文本的空間就要減去這些間距，那么當它基于父級填充時，則會有下面的效果。

還是上面的案例，可以將模態(tài)窗口的高度設置成根據(jù)下級段落文本的高度進行響應，那么它的高度就變成了段落行高加上下內(nèi)間距，段落行數(shù)越多，則模態(tài)窗口的高度越大。

除了上面這種簡單的案例，尺寸適應還可以拓展出不同的用法，比如在一個雙列列表中，可以先制定父級的左右內(nèi)間距和列之間的間距（具體的邏輯不深究，都是作為父級的設置即可），于是每列的寬度就被動確定出來了。

到這里，我們總結了五種元素適配設置：

1. 元素基于父級的對齊
2. 長或?qū)挼臄?shù)值不變
3. 長或?qū)挼牡缺瓤s放
4. 長或?qū)捇诟讣壧畛?/li>
5. 長或?qū)捇谧蛹夗憫?/li>

如果看過 Figma 或即時課程的話應該對它們感到非常的熟悉，沒錯，軟件內(nèi)的響應式（Constraints）和自動布局（Autolayout）就是用于實現(xiàn)這些邏輯的功能。

PS：但一定要注意，它們雖然可以實現(xiàn)部分場景但不夠完美，不能完全等同進開發(fā)的層級結構。

這些元素的適配設置相互作用，層層傳遞，從而使得整個頁面可以適配到不同的屏幕中去。而這要繼續(xù)推導出下一個要點，即頁面適配是頁面內(nèi)元素適配設置的合集，而不是頁面的獨立行為。

而在適配設置中，如果元素的長或?qū)挄凶儎樱s放、填充、響應），那么它就沒有固定數(shù)值，而是一個變量，所以在軟件開發(fā)中不會設置它的具體數(shù)值。但我們在設計界面時，必然要根據(jù)其中一個畫布規(guī)格做設計，所有元素在畫布中就必然會有具體的數(shù)值，所以這個數(shù)值是什么根本不重要，不要用 4 的倍數(shù)去硬套，4 的倍數(shù)只適用于長寬是被固定的元素或間距。

我們用一個 393 規(guī)格的頁面進行講解，它是如何適配到 375 和 430 兩個規(guī)格中去的。

在具體項目中，專業(yè)設計師在每一個頁面設計過程中都會考慮適配對應的邏輯，并確保頁面的適配效果保持統(tǒng)一。而不同頁面場景所需的適配方式各不相同，就需要依靠設計師的分析和經(jīng)驗來完成。

最后，要強調(diào)在一個專業(yè)的團隊中，移動端的適配規(guī)則是由設計師決定的，而不是設計好界面后直接交付給開發(fā)讓他們發(fā)揮 “主觀能動性” 自己判斷。

結尾

剩余的內(nèi)容想了想還是下篇更新，因為以上內(nèi)容是整個移動端適配中最重要的基礎知識，可以直接影響我們進行設計。

其余內(nèi)容我們會在下篇進行更新。

歡迎關注作者的微信公眾號：「超人的電話亭