Expression to get width as a fraction using calc()

Question

I try to construct an expression for a variable line height depending on the width using calc(). The result should be a fraction without units. Is it possible?

To be more precise, I would like to get something like line-height: 2; when 200rem / width < 2 and line-height: 1; when 200rem / width > 2

So, the above 200rem / width should somehow evaluate to a plain fraction. It may be using 100wh or similar. Please note that we don't know the width, we must use a variable!

For example the following:

li > a {
    line-height: calc(22px + (28 - 22) * ((100vw - 480px) / (3840 - 480)));
}

could do the job, but it evaluates to some pixels minus some width units instead of plain fraction without any units as I need.

Answer 1

Use a media query to specify styles depending on properties of the screen (width, for example). I learned the hard way not to use rem units when specifying screen limits so I did these calculations assuming a 14px rem value. You may need to adjust for your needs.

@media screen and (min-width: 1400) {
    body {
        line-height: 2;
    }
}

@media screen and (max-width: 1399) {
    body {
        line-height: 1;
    }
}

Read here for more on media queries

Answer 2

You could use something like this:

.test-class {
  font-size: 20px;
  $width: 100px;

  @if (200rem / $width > 2) {
    line-height: 1;
  } @else {
    line-height: 2;
  }
}