根据屏幕宽度缩放div填充

Question

我正在尝试在媒体查询的范围内将div范围内的填充从15％扩展到5％。

所以，让我说我已经定义了min＆amp; amp;我想让它生效的最大宽度：

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

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

任何意见/建议都表示赞赏！

Answer 1

官方答案是不能仅使用CSS完成的。

但是，你可以使用这样的方法来解决这个问题......

＆＃13;

＆＃13;

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;}}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;