根据 window 宽度在 CSS 中逐步计算

Question

我需要做一个计算，window宽度每100px + 2% css左边增加%:

示例：

宽度 > 700px: left: 30%
宽度 > 800px: left: 32%

我该怎么做？

Answer 1

目前无法编写一个 CSS 规则集，每 100 个 window 宽度像素递增属性 stepwise主要浏览器。您需要为每个间隔编写一个单独的媒体查询。

在SCSS中，你可以用一个循环来做到这一点。这将为从 $base-width 宽度和 $base-percentage 百分比开始的 $number-of-intervals 步数创建媒体查询：

$base-width: 600px;
$base-percentage: 30%;
$number-of-intervals: 6;
@for $i from 1 through $number-of-intervals {
  @media screen and (min-width: #{$base-width + (($i - 1) * 100)}) {
    .my-class {
      left: #{$base-percentage + (($i - 1) * 2)};
    }
  }
}

根据 window 宽度在 CSS 中逐步计算

Stepwise calculation based on window width in CSS

css

sass

calc