現(xiàn)代游戲和應用程序通常需要支持各種不同的屏幕分辨率，特別是 UI 布局需要能夠適應這種情況。Unity 中的 UI 系統(tǒng)包含用于此目的的各種工具，并可通過各種方式將這些工具組合起來使用。

在本操作指南中，我們將研究一個簡單案例，并在此背景下了解和比較不同的工具。在我們的案例研究中，我們在屏幕角點處有三個按鈕（如下所示），目標是使這種布局適應各種分辨率。

在本操作指南中，我們將考慮四種屏幕分辨率：手機高清 (HD) 縱向 (640 x 960) 和橫向 (960 x 640) 以及手機標清 (SD) 縱向 (320 x 480) 和橫向 (480 x 320)。最初的布局設(shè)置為手機高清縱向分辨率。

使用錨點來適應不同的寬高比

默認情況下，UI 元素錨定到父矩形的中心。這意味著它們與該中心保持恒定的偏移。

如果使用此設(shè)置將分辨率更改為橫向?qū)捀弑?，則按鈕可能甚至不再位于屏幕的矩形內(nèi)。

一種將按鈕保持在屏幕內(nèi)的方法是，通過改變布局，使按鈕的位置綁定到屏幕的各個角?？墒褂?Inspector 中的 Anchors Preset 下拉選單或通過拖動 Scene 視圖中的三角形錨點控制柄，將左上角按鈕的錨點設(shè)置為左上角。如果 Game 視圖中設(shè)置的當前屏幕分辨率是最初設(shè)計布局時的目標分辨率（此時的按鈕位置看起來正確），那么最適合這樣做。（請參閱?UI 基本布局頁面以了解有關(guān)錨點的更多信息。）同樣，左下角按鈕和右下角按鈕的錨點可以分別設(shè)置為左下角和右下角。

一旦這些按鈕錨定到各自的角點，當分辨率更改為不同的寬高比時，這些按鈕會保持在相應位置。

當屏幕大小更改為更大或更小的分辨率時，按鈕也仍然錨定到各自的角點。但是，由于按鈕保持原始大?。ㄒ韵袼貫閱挝唬虼税粹o占據(jù)屏幕的比例可能會變大或變小。這種狀態(tài)可能符合需求，也可能不符合需求，具體情況取決于您希望布局在不同分辨率的屏幕上的表現(xiàn)方式。

在本操作指南中，我們知道手機標清縱向和橫向布局的較小分辨率并不意味著屏幕實體較小，只是屏幕的像素密度較低而已。在這些像素密度較低的屏幕上，按鈕看起來不應該大于高密度屏幕上顯示的按鈕，而是應該以相同的大小顯示。

這意味著按鈕變小的比例應該與屏幕變小的比例相同。換句話說，按鈕的比例應遵循屏幕大小。這種情況下，__畫布縮放器 (Canvas Scaler)__ 組件很有用。

隨屏幕大小縮放

畫布縮放器__組件可添加到根__畫布__；畫布是一種帶有畫布組件的游戲?qū)ο?，所?UI 元素都是其子項。通過?GameObject__ 菜單創(chuàng)建新的畫布時，默認情況下也會添加畫布縮放器。

在畫布縮放器組件中，可將其?UI Scale Mode?設(shè)置為?Scale With Screen Size。使用此縮放模式，可以指定要用作參考的分辨率。如果當前屏幕分辨率小于或大于此參考分辨率，則會相應設(shè)置畫布的縮放因子，使所有 UI 元素都與屏幕分辨率一起放大或縮小。

在我們的示例中，我們將__畫布縮放器__設(shè)置為手機高清縱向分辨率 640 x 960?，F(xiàn)在，屏幕分辨率設(shè)置為手機標清縱向分辨率 320 x 480 時，整個布局將按比例縮小，從而保持與全分辨率相同的比例。一切都按比例縮?。喊粹o大小、按鈕到屏幕邊緣的距離、按鈕圖形以及文本元素。這意味著手機標清縱向分辨率中的布局與手機高清縱向分辨率中的布局相同；只是像素密度降低而已。

有一點需要注意：添加畫布縮放器組件后，還要檢查其他寬高比條件下的布局顯示情況。通過將分辨率恢復到手機標清橫向分辨率，我們可以看到按鈕現(xiàn)在看起來比其應有大?。ㄏ惹暗拇笮。└?。

按鈕在橫向?qū)捀弑葪l件下變大的原因歸結(jié)為畫布縮放器設(shè)置的工作原理。默認情況下會將寬度或當前分辨率與畫布縮放器的寬度進行比較，結(jié)果將用作縮放所有內(nèi)容的縮放因子。由于目前橫向分辨率 960 x 640 的寬度是縱向畫布縮放器 640 x 960 的 1.5 倍，因此布局的比例增大到了 1.5。

該組件有一個名為?Match?的屬性，此屬性值可以是 0（寬度）、1（高度）或介于兩者之間的值。默認情況下設(shè)置為 0，表示將當前屏幕寬度與畫布縮放器寬度進行比較，如上所述。

如果?Match?屬性設(shè)置為 0.5，則會將當前寬度與參考寬度做比較并將當前高度與參考高度做比較，并選擇兩者之間的縮放因子。由于在本示例中的橫向分辨率變寬為原來的 1.5 倍，但高度也變短為原來的 1/1.5，因此綜合這兩個因子后得到最終縮放因子為 1，這意味著按鈕將保持其原始大小。

根據(jù)前文，通過在畫布上使用適當?shù)腻^定技術(shù)和畫布縮放器組件相結(jié)合，布局將支持所有四種屏幕分辨率。

請參閱畫布縮放器參考頁面，詳細了解根據(jù)不同屏幕大小縮放 UI 元素的不同方法。