【问题标题】:Unable to confirm why my css calc is invalid无法确认为什么我的 css calc 无效
【发布时间】:2022-01-19 21:41:50
【问题描述】:

我正在为绝对定位元素的 left 属性编写计算。阅读语法后,我唯一能想到的是我正在尝试将两个不同的单位相乘,但我找不到确认,因为我认为第一次计算会解析为整数。

left: calc(1vw * ((100vw / 100) * 1.2));

我需要捕获视口的完整大小,所以 100vw 然后除以 100。所以如果屏幕是 1600px,这应该解析为 16,然后乘以 1.2,所以现在是 19.2,最后乘以 1vw 进行转换它到19.2vw。我无法确认的问题是第一次计算是解析为整数 (16) 还是测量值 (16px)。如果是前者,那么我不知道为什么这不起作用。如果是后者,我该如何解决?

【问题讨论】:

  • 不知道......但我只是想知道......为什么你需要这样一个奇怪的“左”值。我做css这么多年了,从来没有需要超过"% - X"
  • 我正在尝试定位一个滑块按钮,但它与我们在代码库中使用的第 3 方滑块相关(这是一个黑盒子),所以我找到的唯一可行的解​​决方案是屏幕宽度大于 14px 是相对于屏幕尺寸进行缩放。
  • Ummm... 还是不太明白(对不起,我的错,不是你的)... 你难道不能用简单的左边定位元素:50% 和 transformX(-50 %)?

标签: css sass frontend calc


【解决方案1】:

查看MDN 计算:

乘法。至少有一个参数必须是数字。

您的表达式试图将 1vw 乘以另一个 vw 数量,因此无效。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-02-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-07-27
    • 2018-12-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多