Building for “breakpoints"
One of the hard parts of building responsive sites is making decisions about the between-states — that is, what a page looks like when it’s not Xpx or Zpx wide, but Ypx. Sometimes you only have two or three design documents about a single component to build off, leaving you with big gaps in which you have to reason about how to pad, size fonts, etc. How do you decide what to do in the middle?
Bridging the gap
On the mobile-size comp, a component is padded at 10px, but the wide-screen one is padded out to an airy 50px — what do you do on tablets? You’d probably keep the 10px up until a “desktop” breakpoint like 1024px, then switch to 50px. Maybe you’d have an in-between value of 30px at some point, but you’d have to do the math on where to put it yourself, and you’d have to repeat that logic anywhere you wanted to match the 10-30-50 ratio.
And you’re still stuck with gaps — window sizes at which you have to pick either/or, and at which the design balance is still subtly thrown off:
In a perfect world, you’d want the padding to just stretch between 10px and 50px based on window width, right? That way the spacing and breathing room on the page is consistent across all device sizes. It might even be what you imagined it would turn out like when you were designing, but unfortunately, CSS just doesn’t work that way….OR DOES IT!?