Relative, Fixed, and Viewport Sizing in Framer
Creating layouts that look and behave the way we want them to largely comes down to choosing the right sizing mode for each element. As you know, we have several to choose from — and each has a unique purpose, depending on how static or flexible we want things to be. Earlier in this chapter, we unpacked “Fill” and “Fit Content” sizing — but there’s also a time and place to use “Fixed”, “Relative”, and “Viewport” sizing. Whether we want our elements to remain at a specific size, scale with our layout, or even respond to a viewer’s screen size, we’ve got options to get the job done. So let’s dive a bit deeper into how these next three sizing methods work and when to use each one.