Canvas（畫布）
組件隨時獲得設備屏幕的實際解析度並對場景中所有渲染元素進行適當的縮放
Widget（對齊掛件）
放置在渲染元素上，能夠根據需要將元素對齊父節點的不同參考位置
設計解析度
遊戲在設計製作時場景的解析度，即 Canvas 中的 Design Resolution 屬性，也就是圖中紫色邊框的區域
屏幕解析度
顧名思義，就是設備上屏幕的解析度
Canvas（畫布） 組件能夠隨時獲得設備屏幕的實際解析度並對場景中所有渲染元素進行適當的縮放。場景中的 Canvas 同時只能有一個，建議所有 UI 和可渲染元素都設置為 Canvas 的子節點。
選項：
Design Resolution：設計解析度（內容生產者在製作場景時使用的解析度藍本）
Fit Height：適配高度（設計解析度的高度自動撐滿屏幕高度）
Fit Width：適配寬度（設計解析度的寬度自動撐滿屏幕寬度）
通常設計解析度寬高比採用當前主流設備屏幕解析度的寬高比，比如：
iPhone7 Plus
屏幕解析度：1920*1080
寬高比：16:9
設計解析度：1280*720 或者 1334*750
iPhoneX
屏幕解析度：2436*1125
寬高比：2:1
設計解析度：1624*750
iPad
屏幕解析度：2048*1536
寬高比：4:3
設計解析度：1624*1218
當然，實際開發中並不是必須要按照上述解析度來進行設計，可根據項目需求來決定，但還是保持同寬高比比較妥當
Canvas 在做屏幕適配時，只會對整個遊戲的畫面進行縮放，並不會修改所在節點的尺寸，節點尺寸將默認跟設計解析度保持一致
理想狀態下，遊戲設計解析度的寬高比和屏幕解析度的寬高比相同，就可以完美的適配設備屏幕：
遊戲畫面縮放比例 = 屏幕解析度 / 設計解析度
但越來越多異形屏的出現，甚至有時需要同時適配 phone 和 pad，理想離我們越來越遙遠······
· 下面來看下幾種適配方案，具體取捨，需要根據項目需求來定奪這裡以設計解析度：1334*750 為例，介紹下幾種適配方案
Canvas 設計解析度：1334*750
圖片尺寸：1334*750
為了更方便直觀，我們在場景裡添加一些位置標識
適配方法：設計解析度的高度自動撐滿屏幕高度
遊戲畫面縮放比例 = 屏幕解析度高度 / 設計解析度高度
在 iPhone7 Plus 上的表現
完美適配，圖片完全顯示
分析：
遊戲畫面縮放比例 = 1080 / 750 = 1.44
遊戲畫面縮放後的寬度 = 1334 * 1.44 = 1920
1920 = 1920（屏幕解析度寬度）
寬度恰好等於屏幕的寬度，所以完全顯示
在 iPhoneX 上的表現
圖片全部顯示，但左右會有黑邊，也就是橫向沒有鋪滿屏幕
分析：
遊戲畫面縮放比例 = 1125 / 750 = 1.5
遊戲畫面縮放後的寬度 = 1334 * 1.5 = 2001
2001 < 2436（屏幕解析度寬度）
設計解析度縮放後的寬度 < 屏幕解析度的寬度，所以出現黑邊
在 ipad 上的表現
圖片鋪滿屏幕，但左右沒有完全顯示
分析：
遊戲畫面縮放比例 = 1536 / 750 = 2
遊戲畫面縮放後的寬度 = 1334 * 2 = 2668
2668 > 2048 （屏幕解析度寬度）
設計解析度縮放後的寬度 > 屏幕解析度的寬度，所以無法完全顯示
適配方法：設計解析度的寬度自動撐滿屏幕寬度
遊戲畫面縮放比例 = 屏幕解析度寬度 / 設計解析度寬度
其原理同 Fit Height 一樣，此處不再贅述
3同時勾選 Fit Height 和 Fit Width
適配方法：完整顯示設計解析度在 iPhone7Plus 上依然是完美適配，原理同 Fit Height
在 iPhoneX 上的表現和 Fit Height 的表現一樣，但原理不一樣
分析：
Fit Height：
遊戲畫面縮放比例 = 1125/ 750 = 1.5
遊戲畫面縮放後的寬度 = 1334 * 1.5 = 2001
2001 < 2436（屏幕解析度寬度）
設計解析度縮放後的寬度 < 屏幕解析度的寬度，可以完全顯示，但有黑邊
Fit Width：
遊戲畫面縮放比例 = 2436 / 1334= 1.8
遊戲畫面縮放後的高度 = 750 * 1.8 = 1350
1350 > 1125（屏幕解析度寬度）
設計解析度縮放後的高度 > 屏幕解析度的高度，無法完全顯示
因為需要完整的顯示出設計解析度，所以採用縮放比例較小的方式，即：
遊戲畫面縮放比例 = Fit Height = 1.5
在 ipad 上的表現
圖片完全顯示，但上下會有黑邊，也就是縱向沒有鋪滿屏幕
分析：
Fit Height：
遊戲畫面縮放比例 = 1536 / 750 = 2
遊戲畫面縮放後的寬度 = 1334 * 2 = 2668
2668 > 2048 （屏幕解析度寬度）
設計解析度縮放後的寬度 > 屏幕解析度的寬度，無法完全顯示
Fit Width：
遊戲畫面縮放比例 = 2048 / 1334 = 1.5
遊戲畫面縮放後的高度 = 750 * 1.5 = 1125
1125 < 1536（屏幕解析度高度）
設計解析度縮放後的高度 < 屏幕解析度的高度，可以完全顯示，但有黑邊
因為需要完整的顯示出設計解析度，所以採用縮放比例較小的方式，即：
遊戲畫面縮放比例 = Fit Width = 1.5
4
同時不勾選 Fit Height 和 Fit Width
適配方式：鋪滿屏幕
其原理和同時勾選 Fit Height 和 Fit Width 相同，但因為需要鋪滿屏幕，所以採用縮放比例較大的方式，以此來鋪滿屏幕，並且不會產生黑邊
很多情況下，針對不同的設備，適配方案也不是一成不變的
比如同一套設計樣式在 phone 和 pad 上的適配規則就會不同
所以需要通過代碼來獲取設備的屏幕解析度，然後根據寬高比，進行動態適配
let frame = cc.view.getFrameSize();let ratio = frame.width / frame.height;
let fitHeight = true;let fitWidth = false;
cc.Canvas.instance.fitHeight = fitHeight;cc.Canvas.instance.fitWidth = fitWidth;由於篇幅原因，作為動態適配的最佳伴侶 Widget，之後再做詳解，先祭上官方文檔：
https://docs.cocos.com/creator/manual/zh/components/widget.html
Widget (對齊掛件) 是一個很常用的 UI 布局組件。它能使當前節點自動對齊到父物體的任意位置，或者約束尺寸，讓你的遊戲可以方便地適配不同的解析度