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

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>

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

Increase element padding as browser width decreases

html

css

padding

width