媒体查询问题：Safari不能缩放REM中的元素 [英] Media Queries issue: Safari not scaling elements in REM

问题描述

我的布局是基于rem的，最近我注意到，Safari(桌面和移动)只缩放字体大小，而不缩放其他元素。 具体地说，它使用第一个媒体查询缩放元素。

在Chrome和Firefox中一切正常。

HTML

<h1>Hello Circle</h1>
<div class="circle"></div>

CSS

html,
body {
  font-size: 62.5%;
  background-color: red;
}

@media (max-width: 900px) {
  html,
  body {
    font-size: 50%;
    background-color: green;
  }
}

@media (max-width: 579px) {
  html,
  body {
    font-size: 30%;
    background-color: blue;
  }
}

.circle {
  width: 20rem;
  height: 20rem;
  background-color: yellow;
  border-radius: 50%;
}

h1 {
  font-size: 3rem;
} 

小提琴：http://jsfiddle.net/ew97d4rj(黄色圆圈应该随着每个MQ而变小-就像文本一样-但在Safari中，圆圈不会在最小的MQ中缩小。)

我猜媒体查询有问题，因为如果我使用下面的MQS，它可以工作，但会破坏我的布局，因为正常大小仅在579px和700px之间使用。

html,
body {
  font-size: 62.5%;
  background-color: red;
}

@media (max-width: 579px) {
  html,
  body {
    font-size: 30%;
    background-color: green;
  }
}

@media (min-width: 700px) {
  html,
  body {
    font-size: 90%;
    background-color: blue;
  }
}

推荐答案

我现在非常确定，这是一个Safari最小字体大小问题，与媒体查询无关。如果我使用200%/150/100%字体大小的媒体查询，它就"很好"。 当我搜索解决方案时，我找到了使用-webkit-text-size-adjust: none的解决方案，但它似乎不再受支持。至少，它没有任何效果。 此外，我的假设是，文本比例如假设的那样是错误的。它只是缩放Safari设置的最小字体大小。

我在计算机上使用Safari 10.1，在手机上使用Safari 11。

这篇关于媒体查询问题：Safari不能缩放REM中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！