CSS

Question

我想根据指定间隔的屏幕宽度设置填充值。

例如；假设有一个 div。如果屏幕宽度是 1000px，那么我想将 padding-right:30px 设置为 div。如果屏幕宽度为 700px，则填充值将为 padding-right:15px。如果屏幕宽度介于 1000px 和 700px 之间，则填充值必须按比例更改。

我如何使用 pure 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
Equal to 1% of the width of the viewport's initial containing block.

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

Answer 2

这是解决方案：

@media (max-width:1000px) and (min-width:700px) {
    padding-right: calc(15px + (100vw - 700px) * (15 - 30) / (700 -  1000));
};

只要玩弄数字，您就可以通过这种模式获得预期的结果。 Demo

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

CSS - Changing padding based on screen width with respect to specified max and min values

screen

padding