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

Question

我将 h1 的字体大小设置为 1.2rem（即 19 像素），因此所有大小都必须为 19 像素。当我调整大小或减小浏览器宽度时，字体保持不变 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>

你可以看看medium网站，用mobile view看字体也是一样的15px。我的演示不是这种情况。是什么导致了这种行为？

Answer 1

试试 font-size : 12px !important;

Answer 2

您正在将 font-size 设置为 1.2rem。这意味着 1rem 始终等于 html 中定义的 font-size。 html 的 font-size（通常为 16px）可能会因浏览器而异。尝试将 html font-size 设置为 16px。作为片段。 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

Answer 3

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

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

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

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

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

此外，如果 font-size 较小，请使用 @media 查询使其在较小的设备上变大。但正如你的问题。你其实没有任何问题。

编辑

就像我之前说的，伙计，你没有问题，看看这个 gif 你就明白了。

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

font size is not constant across viewports

html

css

font-size

viewport-units

编辑