有没有一种方法可以使用描述元素 CSS 填充和最大宽度 属性 之间的依赖关系的公式来创建 @media 规则？

Question

有一个 div 根据页面宽度改变其 padding-left CSS 值.当页面宽度减小时，填充值会增加。如果页面宽度为1800px则padding为0px，如果width=1700px则padding=10px，即：

|N| Page width | padding-left |
|-| -----------| ------------ |
|1| 1800px     | 0px          |
|2| 1700px     | 10px         |
|3| 1600px     | 20px         |
|.| ...        | ...          |
|9| 1000px     | 80px         |

为此，创建了 9 个 @media 规则，如下所示

@media (max-width: 1800px) {
    .my-padding {
        padding-left: 0px;
    }
}

@media (max-width: 1700px) {
    .my-padding {
        padding-left: 10px;
    }
}
...
...
@media (max-width: 1000px) {
    .my-padding {
        padding-left: 80px;
    }
}

问题：有没有办法只创建一个 @media 规则，但包含一种描述之间依赖关系的 公式 CSS padding 和 max-width 属性？ 一种解决方案是通过编程方式生成一个单独的 CSS 文件，其中包含 9 个所需的 @media 规则

计算padding-left值的公式可以如下：

padding-left = ((1800px - current_page_width) / 100) * 10

问题是我不知道如何应用它

Answer 1

padding-left = ((1800 - current_page_width)/100)*10

可能是：padding-left: calc( (1800px - 100vw ) * 0.1 );

演示

body {
  margin: 0;
  padding-left: calc( (1800px - 100vw) * 0.1);
  background: repeating-linear-gradient(to right, gray 0 10px, transparent 10px 20px);
}

<div style="border:solid;">div</div>

Answer 2

我已将您的媒体查询反转为遵循指定的大小 -- 它正在计算 padding-left: -# over 1800px 但不呈现（padding negatives 无效）。使用下面的计算器：

.my-padding {
  padding-left: 80px;
}
@media (min-width: 1001px) {
 .my-padding {
   padding-left: calc((1800px - 100vw)/10);
 }
}

您可以使用 calc() 在 CSS 中创建公式。 vw 和 vh 单位是视口宽度或高度的 1% -- 100vw 是 100% 视口宽度。我 运行 遇到过 VW/VH 包含和不包含滚动条的情况，因此可能需要进行一些调整。