Question

在设计响应式布局时，我遇到的问题是我的@media断点在浏览器中渲染不一致。

我的布局是根据Automattic/_s

构建的

在（https://gist.github.com/mikeritter/1e7195e91239faead4ff）查看我的CSS。

请注意第70行重置字体大小：

html {
    font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
    overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */
    -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
    -ms-text-size-adjust:     100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}

然后我的媒体查询断点基于10/16 = 62.5％将REM设置为10px

Safari会根据计算（96rem = 960px）渲染我的断点，但其他浏览器会以更高的分辨率破解。

Answer 1

如果还有其他人来自google：我最后问了一个similar question，最终导致我遇到一个duplicate question，我认为这也回答了这个问题。基本上，Safari故意忽略了media query spec：

媒体查询中的相对单位基于初始值，这意味着单位永远不会基于声明的结果。例如，在HTML中，em单位是相对于字体大小的初始值（由用户代理或用户的首选项定义的），而不是页面上的任何样式。

因此，所有其他浏览器将使用该浏览器提供的默认字体大小（今天几乎普遍为16px，因为缩放比例现在是所有用户的标准字体，而不是修改后的默认字体大小）。结果是，出于所有意图和目的，在媒体查询中始终为1rem = 16px 。

为什么Safari在媒体查询中计算REM的方式与其他浏览器不同？

1 个答案: