I’ve converted all my vertical spacing to REMs, so that at smaller screen sizes I can adjust the root size and all my styling will proportionally reduce.
However, I’m still left with pixels for horizontal sizes:
max-widths
break points
I think this makes sense. If I set max-widths in rem and then reduce the root size, my max-width is reduced and I don’t want it to - I want it to respond to the width of the viewport.
Some people are advocating using rem for break points, but I can’t get my head around that.
I created http://onrampwebdesign.com using pixel values in the @media queries, and if you set Safari to “zoom text only”, then hit ⌘+ several times, you will see how the layout disintegrates. If I understand what that article is saying correctly, switching to a em/rem based value for the breakpoints should fix that. I’ll put this on the list of things to try on my next project.
My verdict: Yes, using em for breakpoints is best-practice.
