字体大小在视口中不是恒定的答案

【问题标题】：font size is not constant across viewports字体大小在视口中不是恒定的
【发布时间】：2020-12-21 22:37:12
【问题描述】：

我将 h1 的字体大小设置为 1.2rem（即 19 px），因此所有大小的字体大小必须为 19px。当我调整或减小浏览器宽度时，字体保持不变 19px。但是当我点击设备切换并以手机查看时，字体会迅速减少。为什么会这样？为什么它在移动视图中发生变化？

代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .main h1 {
        font-size: 1.2rem;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus
        laboriosam explicabo voluptates. Optio officiis suscipit deserunt vitae
        pariatur, laborum quae soluta quos hic, beatae quam, fugiat laboriosam
        nisi? Magnam, ut!
      </h1>
      <p>
        recusandae libero voluptatibus vero, pariatur repellendus inventore
        distinctio perspiciatis impedit enim iure. Lorem ipsum dolor, sit amet
        consectetur adipisicing elit. Mollitia repellat maiores est amet minus
        laboriosam excepturi molestiae cumque
      </p>
    </div>
  </body>
</html>

你可以看看中型网站，它的字体在移动端查看时也是相同的 15px。我的演示不是这种情况。是什么导致了这种行为？

【问题讨论】：

但是您使用font-size: 1.2rem; 作为字体大小并且您没有像您所说的那样使用12px。如果您在 CSS 文件中进行更改，请确保删除内部样式，因为它会覆盖您在 CSS 文件中的样式。如果您有外部 CSS 文件，请发布您的代码，我们会尽力帮助您。
我的错让我将帖子更新为 19px 。或多或少是一样的，它在移动设备中看起来不像 19px，它缩小得更小而且没有外部 css。我在头中尝试一切

标签： html css font-size viewport-units

【解决方案1】：

为什么我以前没有想到这一点？您的代码实际上可以正常工作，我刚刚确认font-size 在所有屏幕尺寸下都是相同的，发生的事情很简单。

您有不同的屏幕尺寸，这意味着屏幕上的像素尺寸不同。

所以 font-size 是 shrinking 和 expanding 根据屏幕大小。您可能会看到它很小，但它绝对是 18px 在所有屏幕尺寸下都没有任何改变。

您可以使用开发者工具进行确认。只需使用选择工具选择元素，它就会显示详细信息。比如font-sizecolorfont-family等等

您始终可以在物理设备上对其进行测试以检查并确认。

此外，如果字体大小很小，请使用@media 查询使其在较小的设备上更大。但正如你的问题一样。你实际上没有任何问题。

编辑

正如我之前所说的，伙计，你没问题，看看这个 gif，你就会明白。

【讨论】：

是的，这似乎是真的。不同的像素大小！但我从来没有遇到过这个问题。它们通常在开发工具中保持不变，当我调整浏览器大小时，如何解决我在上面提到的 gif 中展示的问题？
我用来自 medium.com 的示例为您更新了帖子，看看不同屏幕的字体大小是如何相同的。 17px 是所有屏幕的 17px
嘿，伙计，正如我提到的，我确实检查了元素 h1 中的字体大小，它与大屏幕中的字体大小相同。您需要做的是使用选择一个元素或通过它的快捷方式。 ctrl + shift + c，您可以将鼠标悬停在元素上，详细信息将显示出来。经过两次测试后，我向您保证字体大小是相同的。是什么改变了屏幕宽度和像素，您还可以选择元素并查看正在应用的 CSS，您应该发现无论屏幕大小如何，都在使用 1.2rem。
我认为您需要做的是，当您将toggle the device toolbar 放大到100% 时，您可能会看到它。因为正如我之前所说，您没有任何问题，可能是因为您被缩小了而导致混乱。
感谢您的回复！现在更清楚了。很好解释。

【解决方案2】：

您将字体大小设置为 1.2rem。这意味着 1rem 总是等于 html 中定义的字体大小。 html 的字体大小（通常为 16 像素）可能会根据浏览器而改变。尝试将 html 字体大小设置为 16px。作为sn-p。 Click here for more information

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
    html{
        font-size:16px;
      } 
      .main h1 {
        font-size: 1.2rem;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus
        laboriosam explicabo voluptates. Optio officiis suscipit deserunt vitae
        pariatur, laborum quae soluta quos hic, beatae quam, fugiat laboriosam
        nisi? Magnam, ut!
      </h1>
      <p>
        recusandae libero voluptatibus vero, pariatur repellendus inventore
        distinctio perspiciatis impedit enim iure. Lorem ipsum dolor, sit amet
        consectetur adipisicing elit. Mollitia repellat maiores est amet minus
        laboriosam excepturi molestiae cumque
      </p>
    </div>
  </body>
</html

【讨论】：

您可以添加显示样式的图像吗？ IMG.

【解决方案3】：

尝试字体大小：12px !important;

【讨论】：

不建议使用重要的方法解决不了问题。