html - 媒体查询问题 : Safari not scaling elements in REM

Question

我的布局是基于 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;
} 

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

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

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;
  }
}

Answer 1

在 head 标签中使用 meta。 <meta name="viewport" content="width=device-width, initial-scale=1">

并且比使用这样的 css 媒体查询和字体大小仅适用于 body 标签而不适用于 html @media only screen and (max-width: 900px){

body {
    font-size: 50%;
    background-color: green;
  }