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

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

当我打开dev tools并调整窗口大小时，一切都像预期的那样工作。但是在我的手机上，这个设计是坏的。

使用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>

转载请注明出处:http://www.jubohx.com/article/20230521/1449179.html