I was refactoring a component (a complex two-box search that was a horizontal layout on desktop but stacked vertically on mobile) to be more responsive, vs more or less reactive; an earlier rendition basically had the whole component encoded in React twice, one for small devices one for large.
I was using a mix of
@media screen and (min-width: 768px) {
and
@media screen and (max-width: 768px) {
because somethings made more sense to my head as "think of the vertical case, then horizontal is the special case" and other time the opposite.
Well, predictably, that works fine in 99.9% of cases, but at the exact breakpoint of 768px, you are at risk for getting an ugly incompatible mix of layout behaviors.
I guess the answer is to pick one direction and stick with it. On my project, that's generally "min-width". But how to remember and get it straight to my head? Easier: MOBILE FIRST. Literally. Code the mobile version then have mix-width breakpoints let the desktop-ness burst forth to modify it. That's a little annoying when Desktop is using more of the "defaults" for styles but that's a small price to pay for consistency and not having ambiguous breakpoints.
No comments:
Post a Comment