使用 @media 缩放时，Safari 浏览器无法正确计算 rem 单位(宽度/高度/背景大小)

Question

在使用CSS中的REM作为单位时，Scaling在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（％）。

在1440px -62.5/（1920/1440）= 46.875（％）。

除Safari外，所有浏览器都知道何时在媒体查询中将字体大小指定为百分比。我通过将百分比转换为像素来解决问题。

1280：41,667％ * 16px = 6.66672 px

1440：16 * 0,46875 = 7,5。

等等。

Answer 3

您可以将HTML的字体大小设置为625％。接下来，您想使用我的快速脚本转换CSS：

var css = replace(value, /[+-]?([0-9]+.?[0-9]*|.[0-9]+)+rem/g, function (x) {
   return ( parseFloat( (parseFloat(x) * 0.1).toFixed(6) ) ) + "rem";
});

finlay，您的Safari渲染正确。