CSS calc() 函数

Question

我使用的是最新版本的 Chrome，但在使用 CSS calc() 函数时在开发工具中收到“无效属性”错误。

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

这是我的代码。

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

这用于计算背景图片上的 padding-top，这样我就可以在响应式背景图片上获得 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划分.