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):
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.