如何根据屏幕宽度在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;}}
答案 0 :(得分:2)
一个更好的CSS解决方案呢? vw
unit可让您将填充设置为视口(屏幕)宽度的百分比:
div.hero-position {
padding-top: 3vw; /* 3% of width */
padding-bottom: 2vw; /* 2% of width */
}