根据屏幕宽度缩放 div 填充答案

【问题标题】：Scale div padding according to screen width根据屏幕宽度缩放 div 填充
【发布时间】：2016-10-27 17:43:59
【问题描述】：

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

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

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

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

感谢任何意见/建议！

【问题讨论】：

标签： html css

【解决方案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;}}

&lt;div class="dynamic"&gt;This is the div&lt;/div&gt;

【讨论】：

太棒了！正是我想要的