屏幕变小时 Rem 不会调整元素大小答案

【问题标题】：Rem does not rezise elements when screen gets smaller屏幕变小时 Rem 不会调整元素大小
【发布时间】：2021-10-09 23:48:44
【问题描述】：

我有一个问题，当我更改屏幕大小时，rem 没有接收我的任何元素，例如，我在 body 上有一个 3rem 的填充，而我在 html 元素上的字体大小是 62.5%我调整屏幕大小，身体上的填充保持在 3rem 或 30 像素

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #777;
  padding: 3rem;
  box-sizing: border-box;
}

我还包含了视口元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

【问题讨论】：

标签： css

【解决方案1】：

按照你的方式，rems 只有在你改变字体大小时才会改变。

如果您想根据屏幕大小调整 rems，您需要使用媒体查询并在那里更改根字体大小，例如：

html {
  font-size: 62.5%
  @media only screen and (max-width: 900px) {
    font-size: 56.25%;
  }
}

【讨论】：

【解决方案2】：

html {
  font-size: 62.5%;
}

在正常情况下会保证基本的em大小为10px。这是因为浏览器的字体大小默认为 16 像素，而 62.5% 为您提供 10 像素 - 让您更容易知道，例如，3em 实际上是什么（30 像素）。

如果您想在减小（或增加）视口宽度时连续减小（或增加）字体大小，则可以将字体大小设置为与视口宽度成比例。例如：

html {
 /* font-size: 62.5%; */
 font-size: 1vw;
}

但是，有几点需要注意。一些浏览器（我相信 Chrome 会这样做）不允许 font-size 变得太小。更重要的是，用户可以将他们的默认 em 大小设置为更大，以便他们看到放大的文本，并且以绝对单位而不是百分比术语设置字体大小将覆盖它。

因此，在减小字体大小之前需要仔细考虑，因为视口较小 - 用户仍然需要合适的大小才能很好地阅读内容。无论您使用上述“连续”方法还是使用一组媒体查询来减小大小，都是如此。这不一定是可取的。遗憾的是，无法根据视口大小判断用户与屏幕之间的距离。

【讨论】：