使用媒体查询缩放字体适用于桌面，但不适用于移动设备答案

【问题标题】：scaling font with media query works on desktop but not on mobile使用媒体查询缩放字体适用于桌面，但不适用于移动设备
【发布时间】：2021-07-13 21:29:18
【问题描述】：

我使用media query 在窗口缩小时缩放字体大小。我用rem 为我的容器分配宽度和高度值。

当我打开开发工具并调整窗口大小时，一切都按预期工作。但是在我的手机上，这个设计坏了。

使用 Safari 和 chrome 在 Iphone 7 plus 和 Iphone xr 上测试。

这是一个例子：

html {
  font-size: 62.5%;
}

body {
  height: 100vh;
}

.grid {
  display: block;
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: repeat(2, 30rem);
  gap: 4rem 10rem;
  grid-auto-rows: 30rem;
  justify-content: center;
  align-content: center;
}
.box {
  width: 30rem;
  height: 30rem;
  background-color: green;
}

@media screen and (max-width: 1800px) {
  html {
    font-size: 60%;
  }
}
@media screen and (max-width: 825px) {
  html {
    font-size: 40%;
  }
}
@media screen and (max-width: 540px) {
  html {
    font-size: 30%;
  }
}
@media screen and (max-width: 400px) {
  html {
    font-size: 25%;
  }
}
@media screen and (max-width: 300px) {
  html {
    font-size: 15%;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css?v=17" />
    <title>test</title>
  </head>

  <body>
    <div class="grid">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

由于您使用 rem 来指定尺寸，因此可能是这段代码导致了问题

**body {
  height: 100vh;
}**

我再次在开发工具中检查了您的代码，一切正常，不确定为什么设计在移动设备上出现问题，您可以尝试仅以 rem 指定高度。

【讨论】：

不幸的是没有帮助
请尝试仅发布问题的解决方案并提供适当的解释，并尽量避免针对用户的问题，将它们添加到 cmets

【解决方案2】：

我自己计算百分比并使用像素解决了这个问题。仍然不确定为什么它不能在移动设备上运行，而在桌面上却完全正常。

@media screen and (max-width: 1800px) {
  html {
    font-size: 8px;
  }
}
@media screen and (max-width: 825px) {
  html {
    font-size: 6px;
  }
}
@media screen and (max-width: 540px) {
  html {
    font-size: 5px;
  }
}
@media screen and (max-width: 400px) {
  html {
    font-size: 3px;
  }
}
@media screen and (max-width: 300px) {
  html {
    font-size: 2px;
  }
}

【讨论】：