html - 随着浏览器宽度的减小增加元素填充

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>