使用@media(宽度/高度/背景大小)进行缩放时,Safari无法正确计算rem单位

Question

在CSS中使用rem作为单位时,缩放在Safari(PC和Mac)中都不起作用.

示例位于http://jsfiddle.net/L25Pz/3/

标记:

<div>
    <img src="http://www.google.com/images/srpr/logo3w.png" />
    <p>Lorem ipsum dolor sit amet</p>
</div>

CSS:

html { font-size:62.5% }

div { background:url(http://www.google.com/images/srpr/logo3w.png); background-size:275px 95px; background-size:27.5rem 9.5rem; background-repeat:no-repeat; }
img { width:27.5rem; height:9.5rem; }
p { font-size:5rem; }

@media only screen and (max-width: 500px) {
    html { font-size:50%;} /* should render everything * 0.8 */
}

...当浏览器窗口宽度超过600px时,在所有浏览器中呈现大小为275px*95px的图像.此外,在触发媒体查询时,图像和背景将其宽度和高度调整为220px*76px.

但是 - 使用Safari,宽度和高度设置为247px*75px.哪个不是*0.8,这是别的......

另一方面,段落的字体大小正确呈现:挂钩在查询上时为40px.

如果你问我,我会觉得很奇怪.有人有解决方案吗？

Answer 1

您需要设置-webkit-text-size-adjust到none否则的webkit将扩大字体大小为可读大小:

@media only screen and (max-width: 500px) {
    html { font-size:50%; -webkit-text-size-adjust:none; }  /* should render everything * 0.8 */  
}

Answer 2

我通过更改像素百分比解决了这个问题

    @media (max-width: 96em) {
     html {
        font-size: 8px;
        }
     }

浏览器使用标准字体大小16px。当我们使用rem进行适配时，为了计算简单我们指定字体大小为16px的62.5%，即1em = 10px。当我们适应其他分辨率时，我们会按比例更改该值。例如，对于 1280px 的分辨率，它将是

1920/1280=1.5，62.5/1.5=41.667(%)。

1440 像素时 - 62.5/(1920/1440)=46.875(%)。

除 Safari 之外的所有浏览器都了解媒体查询中字体大小指定为百分比的情况。我通过将百分比转换为像素解决了这个问题。

1280：41,667% * 16 像素 = 6.66672 像素

1440：16 * 0.46875 = 7.5。

等等。