时间戳

首页 > 解决方案 > CSS - 根据指定的最大值和最小值根据屏幕宽度更改填充

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

问题描述

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

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

我如何使用纯 css做到这一点？

标签： cssscreenpadding

解决方案

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

@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

推荐阅读