- The element can be pinned to the top or bottom and the left or right.
- This position can be expressed as an absolute pixel value, a percentage of the viewport width, or a percentage of the viewport height.
- The item’s scale can be expressed as an absolute pixel value, a percentage of the viewport width, or a percentage of the viewport height.
- In addition, items can scale on both dimensions but will not maintain aspect ratio. Forimagesin this scenario, the user can set whether that imagecovers, fits or is stretched to the item’s container.
How Responsive Works in Practice
The layout of elements on the workspace is the starting point for all calculations. All relative units are based on that design. In other words, if the viewport on the device is exactly the same as that design, it will look exactly the same as the workspace, no matter what responsive settings the user has.
Only if the viewport of the device is different, the design will adjust. For example, on a 375x667 (iPhone 7) mobile design, say there’s a 300x150 image that’s set to scale by width and pinned top/left by vw. It’s 10 pixels from both the top and left. On a 411x731 device (Pixel 2), that image will be (approximately):
- Width: 80vw = 328px
- Height: 40vw = 164px
- Top: 2.6vw = 10.68px
- Left: 2.6vw = 10.68px
When an item is “unpinned”, we use a (CSS) calculation to keep the center point of the object the same relative distance to the (top/left) edge that it is in the original design.
The default settings are as follows: items on the root level are scaled by width and unpinned (see above). Items in folders are scaled by width and pinned top/left by vw. Note, that in Famous folders are translated directly into DOM and become <div> tags. A special case is scrolling screens. In this case, all items are scaled by width and pinned top/left vw.