html - 根据屏幕宽度缩放 div 内边距

Question

我正在尝试在媒体查询范围内将 div 范围内的填充从 15% 调整到 5%。

所以，假设我已经定义了我希望它生效的最小和最大宽度:

@media (min-width: 500px) and (max-width: 1500px)

我的目标是从 15% @ 1500px 到 5% @ 500px。我知道这样做需要一个方程式来根据屏幕宽度更改比率，但我不确定/没有经验设置这些类型的东西。

如有任何意见/建议，我们将不胜感激!

Answer 1

官方的回答是这不能单独使用 CSS 来完成。

但是，您可以使用类似的解决方法...

div.dynamic {padding:5vw; border:1px solid;}

@media (min-width: 500px) and (max-width: 599px) {div.dynamic {padding:5vw;}}
@media (min-width: 600px) and (max-width: 699px) {div.dynamic {padding:6vw;}}
@media (min-width: 700px) and (max-width: 799px) {div.dynamic {padding:7vw;}}
@media (min-width: 800px) and (max-width: 899px) {div.dynamic {padding:8vw;}}
@media (min-width: 900px) and (max-width: 999px) {div.dynamic {padding:9vw;}}
@media (min-width: 1000px) and (max-width: 1099px) {div.dynamic {padding:10vw;}}
@media (min-width: 1100px) and (max-width: 1199px) {div.dynamic {padding:11vw;}}
@media (min-width: 1200px) and (max-width: 1299px) {div.dynamic {padding:12vw;}}
@media (min-width: 1300px) and (max-width: 1399px) {div.dynamic {padding:13vw;}}
@media (min-width: 1400px) and (max-width: 1499px) {div.dynamic {padding:14vw;}}
@media (min-width: 1500px) {div.dynamic {padding:15vw;}}

<div class="dynamic">This is the div</div>