Framer Tips — Responsive for multiple devices
使用 Framer 製作 Prototype 通常會有兩種做法：
- 是 import from Sketch/Photoshop
- 另一種則是直接在 Framer 從頭開始建構
而這篇文章的技巧是適用於 2. ，當你想在 Framer 從零開始製作時，於一開始的設定方法。
一般作法
通常在使用 Framer 製作時，最一開始會先選定一個裝置，它的長寬比會是你製作 UI 時的預設，比如像我們在製作 iOS Phone 的 UI 時，會以 750 x 1334 (px) 為 1x 的設定，那之後在 Framer 製作時，就會先選定 iPhone6s 作為預設裝置。（如下圖）
然後，你接下來所建構的每一個東西，都是基於此 750 x 1334 (px) 的設定，像是左圖的 “ui” Layer。（如下圖）
但是，這會有個問題，你會在哪些裝置上預覽跟操作？或者，你是否會分享 Framer Link 給其他人使用？而他們所使用的裝置，是否都剛好跟你預設解析度一樣？如果不是，那會發生什麼事？
如你所見，上圖三種裝置（iPhone6sPlus、Samsung Note5、HTC One A9）所顯示的內容都是沒有填滿螢幕的！
所以，接下來的方法，就是能夠讓你所製作的內容，可以在多數手機裝置上正確顯示（填滿畫面）。
Responsive 的方法
事實上方法不只一種，我自己有使用過兩種方式，此篇會先分享其中之一。
這兩種方法都跟「比例」很有相關。
首先一定要知道的基本數值就是你所定義的預設長寬，延續上面的舉例，就是 750 x 1334 。所以在 Framer 裡的定義大概可以像下面這樣：
default_w = 750
default_h = 1334第二個要知道的是，將會在哪些裝置上顯示，它們的解析度為何？舉例：
- iPhone6sPlus：1242 x 2208
- Samsung Note5：1440 x 2560
- HTC One A9：1920 x 1080
- … and more
嗯⋯沒錯，解析度超多種，但不用擔心，這件事我們讓 Framer 告訴我們：
screen_width = Framer.Device.screen.width
screen_height = Framer.Device.screen.height 接下來，就是最重要的「比例」了！就是用「顯示的螢幕解析度」除以「你所定義的預設解析度」，用寬或用高都可以，以寬來舉例：
ratio = screen_width / default_w下一步就是要建立一個大容器，並且讓他能夠在不同裝置上填滿螢幕顯示，姑且叫它為「all」：
all = new Layer
width: default_w # <-- 等於你所定義的預設寬 750
height: default_h # <-- 等於你所定義的預設寬 1334
scale: ratio # <-- 比例用在這，乘以這個差異來填滿畫面
originY: 0 # <-- scaleY 縮放的預設 pivot 是正中心，改為最上緣
y: 0 # <-- 接著就把縮放的起始設為最上緣all.centerX() # <-- 水平置中
有了「all」這個大容器，接下來就把你所製作的內容（content）放在裡面吧！（ parent: all ）
content = new Layer
parent: all到這邊，基本上就完成了，但是還有個小問題，就是在 Framer 裡讓 layer 縮放 scale 變大後，會讓 layer 變得糊糊的，所以必須要用上 force2d 這個 layer 屬性，設為 true 之後就不會變糊了。而為了接下來不必在每個 layer 的設定中都要特地加上去，所以可以先把它設定為預設，方法如下：
Framer.Defaults.Layer.force2d = true記得這行要放到「all」layer 之前。
不過 force2d = true 還是有可能會遇到無法顯示的情況，到時再特地為該 layer 加上 force2d = false 的設定。
最終結果：
沒錯，不管它們本來的解析度為何，全部都變成用你所定義的預設解析度，乘以相對比例～縮放填滿了整個畫面！
Framer Studio 的 code：
Scale Responsive 的限制
如果你的預設解析度的長寬比為 1.778（1334/750），那麼能夠 100% 完全填滿顯示的裝置長寬比也同樣是 1.778
1334 / 750 ≒ 1242 / 2208 ≒ 1440 / 2560 ≒ 1920 / 1080 ≒ 1.778所以如果選擇用 iPad 預覽，就會發現下緣被切掉（擋住）。（ 2048 / 1536 ≒ 1.333 ）
但是「某些項目」也是有方法可以避免，以「Bottom Tab」為例，它的位置邏輯是：
「 Tab最下緣」 等於 「螢幕顯示的最下緣」
tab.maxY = screen_height ( 就是 Framer.Device.screen.height )
這樣就可以正確顯示了。
