40px 的浏览器字体大小正在触发移动布局。这是一个错误吗？ [关闭]答案

【问题标题】：Browser font-size of 40px is triggering mobile layout. Is this a bug? [closed]40px 的浏览器字体大小正在触发移动布局。这是一个错误吗？ [关闭]
【发布时间】：2020-11-17 04:20:18
【问题描述】：

...或者有办法解决这个问题吗？

基本上，正如标题所说，当我将浏览器字体大小更改为 40 像素时，就会触发移动网站。我真的想不出办法来解决这个问题，所以我想知道最终如何解决这个问题？

【问题讨论】：

您能补充一些信息吗？您的代码是什么样的，您使用的是哪个浏览器等。这样我们就可以猜测为什么会发生这种情况。
欢迎来到 Stack Overflow！只是为了补充@Warden330 所说的内容，请阅读how to create a minimal, reproducible example 和How do I ask a good question? 以帮助您从这里开始。目前您的问题中没有足够的信息，因此我们可以提供帮助。至少在展示这种行为的网站的 cmets 中的公共 URL 将有助于我们解释。

标签： css accessibility font-size

【解决方案1】：

这可能不是错误，而是一个特性：为了可访问性，我们希望避免水平滚动、具有超窄列的布局或从容器中流出的文本。因此，对于较大的缩放系数（或较大的字体大小），线性布局（也称为“移动网站”）通常更可取。

（此时我猜测以下是您的问题，待完善）

在响应式网页设计中，不同的布局是通过所谓的断点实现的，即media queries，通常基于viewport-width。

断点可以基于像素，但要使它们更基于内容，可以基于文本大小，在rem。 30rem 处的断点可以理解为“如果在当前文本大小和当前视口大小下，一行约 30 个字符的文本适合一行，则使用此布局”。

您似乎确信即使文本大小为 40 像素，您的非移动布局仍然可以正常工作，而不会出现水平滚动和溢出文本。基于大量假设，您的解决方案可能是将断点扩展到更窄的视口。

假设您使用的是移动优先断点，您将在 CSS 文件中更改以下内容：

-@media (min-width: 30rem)
+@media (min-width: 20rem)

【讨论】：