Question

如何根据屏幕宽度在JavaScript make div或img或padding Scale中创建函数？

我不想使用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 unit可让您将填充设置为视口（屏幕）宽度的百分比：

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

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

1 个答案: