使用单位“REM”

使用单位 REM 对于标签 p, h1-h6, a 帮助您在批量编辑字体大小时节省时间。

例如：

:root {
    font-size: 16px;
}

h1 {
    font-size: 2rem;
}

当我改变时 font-size 原件是卡 <h1> 也相应改变。

认为：

:root{font-size: 16px;} 然后卡 <h1> 会有尺寸 32px.
:root{font-size: 20px;} 然后卡 <h1> 会有尺寸 40px.

见笔例如：REM UNIT 字体大小通过阿特鲁 (@artrublog) on 代码笔.

将单位“px”替换为“%”

这个你可以参考一下，不一定要换算成单位 %.

什么时候 font-size 固定为 px。即使用户将字体设置为大于或小于默认值（16px 是所有设备的默认值），它也将有助于防止网站布局发生移动，尤其是在移动设备上。

如果您希望网站尊重用户的字体大小。您可以改用 % 装置。

具体这里是 62.5% = 10px 当用户设置默认字体大小时。

根据我使用的比例 6.25% = 1px 合并单位 REM 更轻松。

例如我想要标签 <h1> 如果字体大小为 32px 则：

:root{font-size: 62.5%;} 然后卡 h1{font-size: 3.2rem;}.
:root{font-size: 6.25%;} 然后卡 h1{font-size: 32rem;}.

见笔例如：% UNIT 字体大小通过阿特鲁 (@artrublog) on 代码笔.

创建字体大小 Reponsize

创建 font-size 响应式，即字体大小将随每个屏幕尺寸而变化。

您可以为每个设备宽度硬设置字体大小。

例如：

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, consectetur quas incidunt quibusdam deserunt cum non,
  quasi facere labore repudiandae, mollitia harum dolores sed ad voluptatem adipisci pariatur ex inventore.</p>
<style>
  /* Mobile */
  @media(max-width: 479px) {
    body {
      font-size: 16px;
    }
  }

  /* Tablet */
  @media(min-width: 480px) and (max-width: 1024px) {
    body {
      font-size: 26px;
    }
  }

  /* Desktop */
  @media(min-width: 1025px) {
    body {
      font-size: 40px;
    }
  }
</style>

然而，上述方法并不灵活，因为当今有许多具有多种不同尺寸的设备。

我使用该功能 calc 帮助代码更短，屏幕缩放更灵活。

我们来看看这个工具流体响应特性计算器.

物品单位您可以选择您想要的单位。我会用它 px.

物品范围是字体大小幅度，如我设置的示例中所示 16px-40px.

物品视口是屏幕宽度（width）的尺寸边距。我会把这个词 360px-1024px.

在部分 CSS 方法 您选择该框夹钳。然后你只需复制下面生成的 CSS 代码即可。

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, consectetur quas incidunt quibusdam deserunt cum non,
  quasi facere labore repudiandae, mollitia harum dolores sed ad voluptatem adipisci pariatur ex inventore.</p>
<style>
  body {
    font-size: clamp(16px, calc(1rem + ((1vw - 3.6px) * 3.6145)), 40px);
  }
</style>