使用媒體查詢縮放字體適用於桌面，但不適用於移動設備

Question

隨着 window 的縮小，我正在使用media query來縮放字體大小。 我用rem單位為我的容器分配寬度和高度值。

當我打開開發工具並調整 window 的大小時，一切都按預期工作。 但是在我的手機上，這個設計壞了。

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

Answer 1

計算我自己的百分比並使用像素解決了這個問題。 仍然不確定為什么它不能在移動設備上工作，而在桌面上完全正常工作。

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

Answer 2

由於您使用 rem 來指定大小，因此這段代碼可能會導致問題

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

我再次在開發工具中檢查了您的代碼，一切正常，不確定為什么設計在移動設備上出現問題，您可以嘗試僅以 rem 指定高度。

使用媒體查詢縮放字體適用於桌面，但不適用於移動設備

問題描述

2 個解決方案

解決方案1
1 2021-04-19 19:04:22

解決方案2
-1 2021-04-19 18:04:08

使用媒體查詢縮放字體適用於桌面，但不適用於移動設備

問題描述

2 個解決方案

解決方案1 1 2021-04-19 19:04:22

解決方案2 -1 2021-04-19 18:04:08

解決方案1
1 2021-04-19 19:04:22

解決方案2
-1 2021-04-19 18:04:08