使用 JavaScript 根据屏幕宽度缩放 div

Question

如何根据屏幕宽度在 JavaScript 中制作 function 制作 div 或 img 或填充比例？

我不想使用 CSS 解决方案

这是用于正在使用的 div 填充

@media(min-width: 300px) and (max-width: 399px) {div.hero-position {padding-top: 58px; padding-bottom: 36px;}}
@media (min-width: 400px) and (max-width: 499px) {div.hero-position {padding-top: 71px; padding-bottom: 48px;}}
@media (min-width: 500px) and (max-width: 599px) {div.hero-position {padding-top: 82px; padding-bottom: 60px;}}
@media (min-width: 600px) and (max-width: 699px) {div.hero-position {padding-top: 98px; padding-bottom: 72px;}}
@media (min-width: 700px) and (max-width: 799px) {div.hero-position {padding-top: 99px; padding-bottom: 84px}}
@media (min-width: 800px) and (max-width: 899px) {div.hero-position {padding-top: 116px; padding-bottom: 96px;}}
@media (min-width: 900px) and (max-width: 999px) {div.hero-position {padding-top: 124px; padding-bottom: 108px}}
@media (min-width: 1000px) and (max-width: 1099px) {div.hero-position {padding-top: 118px; padding-bottom: 120px;}}
@media (min-width: 1100px) and (max-width: 1199px) {div.hero-position {padding-top: 140px; padding-bottom: 132px;}}
@media (min-width: 1200px) and (max-width: 1299px) {div.hero-position {padding-top: 174px; padding-bottom: 144px;}}
@media (min-width: 1300px) and (max-width: 1399px) {div.hero-position {padding-top: 203px; padding-bottom: 156px;}}
@media (min-width: 1400px) and (max-width: 1499px) {div.hero-position {padding-top: 218px; padding-bottom: 168px;}}
@media (min-width: 1500px) {div.hero-position {padding-top: 239px; padding-bottom: 180px;}}

Answer 1

更好的 CSS 解决方案怎么样？ vw单位可以让您将填充设置为视口（屏幕）宽度的百分比：

div.hero-position {
  padding-top: 3vw; /* 3% of width */
  padding-bottom: 2vw; /* 2% of width */
}