Media Queries and `rem`s not working in Safari 5.1
css, media-queries, responsive-design, safari
Solution
It seems that in Safari 5.1, though it supports both media queries and `rem`s, it doesn't support them together. Switch the `rem`s in your media queries to `em`s and you'll be good.
This is frustrating though if, like me, you store a lot of your width/breakpoints in SASS or LESS variables for easy reuse, and use them as both breakpoints and widths, the latter where 1rem may not equal 1em. A way to get around this would be adding `font-size:1rem` to the parent element to ensure 1em does equal 1rem, but that's not always possible.
Problem
I'm doing comprehensive browser testing for a responsive web app, and none of my media queries are being computed in Safari 5.1.7. Here are a couple examples: ``` @media all and (min-width:42rem) and (max-width:45rem) @media all and (min-width:72rem) ``` All of my media queries are laid out like this. Any ideas?