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

问题描述

我将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在所有屏幕尺寸下都是一样的，这很简单。

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

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

您可以使用开发人员工具进行确认。只需使用选择工具选择元素，它将显示详细信息。例如font-size color font-family等

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

如果字体大小较小，请使用@media查询使其在较小的设备上更大。但是随着您的问题。您实际上没有任何问题。

编辑

正如我在哥们面前说的那样，您没有问题，请检查此gif文件，您会明白的。

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

尝试字体大小：12px ！重要；

font-size html viewport-units