12

在 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 */
}

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

但是 - 使用 Safari，宽度和高度设置为 247px * 75px。这不是* 0.8，它是别的东西......

另一方面，段落的字体大小正确呈现：40px 连接查询时。

如果你问我，那就太奇怪了。有人有解决方案吗？

4

2 回答 2

23

您需要设置-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 */  
}
于 2012-11-07T09:16:03.483 回答
4

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

    @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。

等等。

于 2018-11-29T22:36:01.600 回答