媒体查询和“rem”在 Safari 5.1 中不起作用答案

【问题标题】：Media Queries and `rem`s not working in Safari 5.1媒体查询和“rem”在 Safari 5.1 中不起作用
【发布时间】：2013-12-02 15:04:28
【问题描述】：

我正在为响应式 Web 应用程序进行全面的浏览器测试，并且我的任何媒体查询都没有在 Safari 5.1.7 中进行计算。以下是几个例子：

@media all and (min-width:42rem) and (max-width:45rem)

@media all and (min-width:72rem)

我所有的媒体查询都是这样布局的。

有什么想法吗？

【问题讨论】：

并不是说这是重复的，但这个问题也会影响（或至少曾经影响）Chrome，所以这是一个影响 WebKit 的错误，而不是 Safari 独有的问题。见stackoverflow.com/questions/12201003/…
请使用像素。所有浏览器都支持 px
@BoltClock 感谢您指出这一点！很高兴知道。刚刚完成了完整的浏览器测试，我可以确认唯一不支持rem 和媒体查询组合的广泛使用的浏览器（至少在我们的网站上）是 Safari 5.1。
@BipinKumarPal 实际上，使用ems 或rems 进行媒体查询要好得多。你可以在这里阅读更多相关信息（跳转到#4）：bradfrostweb.com/blog/post/…

【解决方案1】：

似乎在 Safari 5.1 中，虽然它同时支持媒体查询和rems，但它并不同时支持它们。将媒体查询中的rems 切换为ems，你会很好。

如果像我一样，将大量宽度/断点存储在 SASS 或 LESS 变量中以便于重用，并将它们用作断点和宽度，这很令人沮丧，后者 1rem 可能不等于 1em。解决此问题的一种方法是将font-size:1rem 添加到父元素以确保 1em 确实等于 1rem，但这并不总是可行的。

【讨论】：