html文字大小-CSS3实现的响应式字体：自适应视图窗口大小的新单位

这能解决什么问题？

我目前正在做一个项目。 客户要求可以根据用户屏幕的大小手动调整标题的大小。 我知道我通常使用的相对字体单位（注意*如px、pt、em）只是相对于HTML根元素的大小手动更改html文字大小，而不是相对于用户屏幕。

在网上搜索后我发现了一个新的字体大小单位，称为：Viewport-PercentageLengths。

我在 MDN 上的一篇文章中找到了这个 Viewport-percentagelengths，这正是我正在寻找的，我只是不知道它叫什么。

它是如何工作的？

虽然很简单。 1个单位是当前视图窗口大小的1%，长度和高度不同，分别用(vw,vh)表示。 可以用vmin和vmax设置最大值和最小值。

1vw=当前视图窗口（viewport）长度的1%

1vh = 当前视图窗口（视口）高度的1%

1vmin=1vw 或 1vh，取决于哪个更小

1vmax=1vw或1vh，看哪一个更大

如果当前视窗长度为100mm，则5vw为5mm。

vmin和vmax的设置如下：

section {
 width: 100vmin;
 background-color: #ff5442;
}

例子

这是示例 1、示例 2 的完整副本

注意 *响应式布局 CSS 框架（例如 *Bootstrap）大多使用响应式样式（例如 @media(max-width:*){}）来实现。

// 屏幕宽度小于767个象素时应用的CSS样式
@media (max-width: 767px) {
   //CSS代码 
}

// 屏幕宽度在767和991象素之间的CSS样式
@media (min-width: 768px) and (max-width: 991px) {
   //CSS代码 
}

当超过阈值时html文字大小，此方法会更改大小。 vh 和 vw 等单位将随着窗口大小立即改变。