浏览器宽度减小时增加元素填充

Question

CSS中填充的默认行为与预期一致，并且在浏览器宽度减小时不会增加。在下面的代码段中，基于百分比的填充值将减少，因为宽度减少，就像预期一样。

html {
  background-color: #f8f8f8;
  font-family: Arial;
  text-transform: uppercase;
}
h1 {
  display: inline-block;
  background-color: #fe0;
  padding: 4%;
}

<h1>Highlighted Text</h1>

我使用calc和vw，vh等值学习了一些有趣的CSS技术来做一些有趣的非标准行为。

我可以在宽度减少时反向默认行为和增加填充（或者至少会产生这种错觉）吗？

编辑：我也知道媒体查询，但我希望这种过渡能像普通默认填充一样顺畅。

Answer 1

你走了:)）

html {
  background-color: #f8f8f8;
  font-family: Arial;
  text-transform: uppercase;
}
h1 {
  display: inline-block;
  background-color: #fe0;
  padding: calc(50px - 4%);
}

<h1>Highlighted Text</h1>