时间戳

首页 > 解决方案 > 有没有办法使用描述元素 CSS 填充和 max-width 属性之间依赖关系的公式来创建 @media 规则？

html - 有没有办法使用描述元素 CSS 填充和 max-width 属性之间依赖关系的公式来创建 @media 规则？

问题描述

有一个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填充和max-width属性之间依赖关系的公式？一种解决方案是使用 9 个所需的@media规则以编程方式生成单独的 CSS 文件

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

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

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

标签： htmlcssmedia-queries

解决方案

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>

推荐阅读