CSS-根据屏幕宽度相对于指定的最大值和最小值更改填充

Question

我想基于屏幕宽度相对于指定间隔设置填充值。

例如；假设有一个div。如果屏幕宽度为1000px，那么我想将padding-right:30px设置为div。如果屏幕宽度为700px，则填充值为padding-right:30px。如果屏幕宽度在1000px和700px之间，则填充值必须成比例地变化。

我该如何使用纯CSS？

Answer 1

您可以将媒体查询与视口百分比长度结合使用。

@media screen and (width: 1000px), screen and (width: 700px) {
    div {
        padding-right: 30px; 
    }
}

@media screen and (min-width: 700px) and (max-width: 1000px) {
    div {
        padding-right: 10vw; /* Corresponds to 10% of the viewport width */
    }
}

有关媒体查询的更多信息，请点击https://www.w3schools.com/css/css3_mediaqueries_ex.asp

vw 等于视口初始包含块的宽度的1％。

请参见https://developer.mozilla.org/fr/docs/Web/CSS/length