Styled-system: Question: Why em's for breakpoints and not px?

[duro]

As the title says: "Why em's for breakpoints and not px"

Genuinely curious, and would love to be pointed at a place where this is written up as best practice, as I'm sure you did so for good reason.

[duro]

Actually, the more I dig into this, the more I'm wondering if might be good to add a way to use px instead of em's. I'm trying to create a single config for my breakpoints, and use them for both styled-system as well as react-responsive (for when I need to change what component is rendered based on a breakpoint.

react-responsive uses px, and I havn't found a good way to reliably convert the two and keep it consistent. When I try and use em's with react-responsive I run into issue with gaps between breakpoints where either no query matches, or two match at the same time.

[srosset81]

I agree that we should be able to define breakpoints in pixels as well as in em.
Sometimes you have to use an existing CSS architecture and it's just not possible to pass everything to em.

[zentuit]

I would like this also as it would get me out of a little jam.

My specs for sizes are:

• Small: 0-768px (likely includes phones and tablets in portrait mode)
• Medium: 769-992px (likely includes tablets in landscape mode)
• Large: 993px and up (likely includes desktop/laptop monitors)

Converting them to em units (with the default 16px = 1em) you get:

• Small: 0-48em (likely includes phones and tablets in portrait mode)
• Medium: 48.0625-62em (likely includes tablets in landscape mode)
• Large: 62.0625em and up (likely includes desktop/laptop monitors)

That means I have to make my breakpoints = [48.0625, 62.0625] since the media query resolves to @media screen and (min-width: ${n}em)

I can't use 48 and 62 because the iPad portrait mode will fall into the Medium category. So I'm at at mercy of each individual browser's rounding algorithm.

With px based breakpoints, I could make them [769, 993] and not have to worry about that.

[srosset81]

Solved in version 1.0.0 !
Thanks @jxnblk ! :+1:

[jxnblk]

I'm planning on moving all numeric values to referencing px in the next version. The underlying media queries might still transform those values to em units to follow best practices, but it should make the API a little simpler by keeping with the same units across the entire library