CSS 计算() 函数

Question

我使用的是最新版本的 Chrome，但在使用 CSS calc() 函数时在开发工具中出现 "Invalid Property" 错误。

我以前从未真正使用过它，所以我可能在这里做错了什么，虽然我看不到什么。希望有人能帮我解决这个问题。

这是我的代码。

padding-top: calc(980px / 1980px) * 100;

这用于计算背景图片上的填充顶部，以便我可以在响应式背景图片上有 16:9 比例。

答案是 49.49%。

我的 css 这个特定部分的其余代码如下，以防 CSS 需要一些东西来解决这个问题。

.hero{
/** Height 980px / Width 1980px * 100 -- Keeps image aspect at 16:9 **/
padding-top: calc(( 980px / 1980px ) * 100);

max-width:1980px;
background:url('images/default-bg.jpg') no-repeat center center #fff;
background-size:cover;

}

希望这是有道理的。我查看了 Can I use 并且不使用供应商前缀似乎不是问题。

另一件可能影响这一点的注意事项是我使用的是 SCSS 和 Scout App。我应该只使用 SCSS 计算来代替吗？

只是想使用这个 css 功能，因为我以前从未使用过它。

谢谢旦

Answer 1

不能按单位除，只能按numbers。

Answer 2

您正在使用

padding-top: calc(980px / 1980px) * 100);

使用以下

padding-top: calc(980px / 1980 * 100);

calc guide

发布工作示例

.box {
  width:500px;
  height:500px;
  background:tomato;
  padding-top: calc(980px / 1980 * 100);
}

<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque molestiae, quos mollitia dolorum id eaque in repellendus? Quae itaque numquam ipsa quasi eos, ea ullam at vero perspiciatis velit? Nesciunt.
</p>
</div>

Answer 3

你可以通过这个得到你想要的....

padding-top: calc(980px / 1980 * 100);

Answer 4

您根本不需要使用 px 作为单位。除以 px/px 将导致没有单位，因此没有必要将其放入计算中。只需选择：

padding-top: calc(980 / 1980 * 100%);

我刚刚测试过，它在 Chrome 中运行良好。

Answer 5

尽管 calc() 函数允许使用不同的单位，但您应该 除以无单位的数字 。例如：

width: calc(500px / 50 *2)

有一篇很棒的文章解释了 calc() 函数 here。

CSS 计算() 函数

CSS calc() function

css

calc

你可以通过这个得到你想要的....