Question

在CSS中使用rem作为单位时，缩放在Safari（PC和Mac）中都不起作用。

的示例

标记：

<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

是否有解决此问题的现代方法？ -webkit-text-size-adjust似乎不再是有效的密钥。

Answer 3

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

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

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

p / 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。

以此类推。

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

3 个答案: