使用 calc() 以分数形式获取宽度的表达式答案

【问题标题】：Expression to get width as a fraction using calc()使用 calc() 以分数形式获取宽度的表达式
【发布时间】：2020-03-16 17:06:20
【问题描述】：

我尝试使用calc() 根据宽度构建可变行高的表达式。结果应该是fraction without units。有可能吗？

更准确地说，当200rem / width < 2 和line-height: 1; 时200rem / width > 2 时，我想得到类似line-height: 2; 的东西

所以，上面的200rem / width 应该以某种方式计算为一个简单的分数。它可能正在使用100wh 或类似名称。请注意，我们不知道宽度，我们必须使用变量！

例如：

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

可以完成这项工作，但它会根据我的需要评估为一些像素减去一些宽度单位，而不是 没有任何单位的普通分数。

【问题讨论】：

可以使用媒体查询吗？
@ssc-hrep3 不，我的目标是构建一些可变的，而不是有条件的。
这能回答你的问题吗？ css calc - round down with two decimal cases
@04FS 谢谢，但没有。仅当您指定数字时，该轮函数才有效，它不进行数学计算。
@SorinGFS 重点应该是这部分，“不幸的是，CSS 中没有原生方式来舍入（或 ceil/floor）数字。”（ SO 对“可能重复”自动评论的新措辞是可怕的恕我直言。）

标签： css

【解决方案1】：

使用媒体查询根据屏幕的属性（例如宽度）指定样式。我学会了在指定屏幕限制时不使用rem 单位的艰难方法，所以我假设14px rem 值进行了这些计算。您可能需要根据自己的需要进行调整。

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

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

Read here 了解有关媒体查询的更多信息

【讨论】：

请阅读问题，我不想在这里解决问题，我很好奇是否可以在 calc 中获取宽度变量以生成纯分数。
@SorinGFS CSS 不做变量（像那样），所以简短的回答是否定的。如果你想动态改变样式，你需要使用 JS 来响应布局的变化。
@isick CSS supports variables/custom properties.
@ssc-hrep3 这些“变量”在运行时不可赋值。即，您不能将元素的宽度存储到其中（如问题中所述）
@ssc-hrep3 我不同意。例如：calc(22px + (28 - 22) * ((100vw - 480px) / (3840 - 480)))，但在这种情况下，它计算为一些像素减去宽度单位。我想要简单的分数。

【解决方案2】：

你可以这样使用：

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

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

【讨论】：

大声笑，你是怎么决定宽度是100px的？ :)
这不是CSS——这是Sass——它不会被浏览器执行；编译时只有 sass 编译器。
@isick 你又错了，这是纯 CSS：developer.mozilla.org/en-US/docs/Web/CSS/calc
@isick 我没有提到任何地方，我提到了 calc()
@SorinGFS 我正在评论 ssc-hrep3 提交的这个答案...他的答案使用 Sass，不适合您的目的。