how i should calculate this in css?-CodePudding

I need to make a calculation that every 100px of window width 2% css increased in the left %:

Examples:

width > 700px: left: 30%
width > 800px: left: 32%

How I can do this?

CodePudding user response：

It's not possible to write a single CSS ruleset that increments a property stepwise every 100 pixels of window width. You'll need to write a separate media query for each interval.

In SCSS, you can do this with a loop. This will create a media query for $number-of-intervals number of steps starting at $base-width width and $base-percentage percentage:

$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)};
    }
  }
}

CodePudding user response：

At this point you should try using JavaScript, because you can’t make calculation in css. You could use css alternative like sass which support variable and calculation.

Also I think that there I not enough information for us to help you.