随着浏览器宽度减小，增加元素填充

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>

我已经学习了一些有趣的CSS技术，它们使用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>