CSS calc() 函数答案

【问题标题】：CSS calc() functionCSS calc() 函数
【发布时间】：2018-03-06 20:38:44
【问题描述】：

我使用的是最新版本的 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函数，之前没用过。

谢谢丹

【问题讨论】：

不要使用像素，而是尝试使用 calc(16em / 9em)。
嗨，我也试过了，但没有任何反应，开发工具仍然显示 Invalid Property Value。
如果.hero 是一个全宽元素，您可以简单地定义height: 0; padding-bottom: 56.25% 来创建一个16:9 的容器。如果不是，则将该样式分配给它的::before 伪元素
我只是想看看是否有一种动态方法可以做到这一点，而无需对答案进行硬编码。考虑以这种方式使用 calc() 如果我更改了高度或宽度，它将重新计算 padding-bottom 的 % 值
所以你仍在硬编码高度或宽度

标签： css calc

【解决方案1】：

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

【讨论】：

我尝试更改 980px / 1980px * 100% 但仍然出现错误。
如果它包含一个有效的代码版本，这将花费您不到一分钟的时间来编写，它会是 +1 来自我。但以目前的形式，它是一个糟糕答案的完美例子。 @DanielWinnard，这就是 Lars 的意思 padding-top: calc((980px / 1980) * 100)。这是正确的答案。如果你除以px/px，你的结果仍然是无单位的，对吧？这是一个更简单的版本：calc(98px / 19800)
@AndreiGheorghiu 我会说这是一个糟糕答案的半完美示例，因为我本可以通过指向 MDN 的链接来回答，但你是对的并且得到了我的支持 :)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

这会改变预期的输出，将单位从px 更改为%。很可能，这不是 OP 想要的。
预期的答案是%。引用：“答案是 49.49%”。解释说这是用于填充顶部响应纵横比技巧，这对我来说完全有意义。
@AndreiGheorghiu 你错了。我的答案中的规则确实有效，并将元素的 padding-top 正确设置为其宽度的 49.49%。您可能想阅读这个问题：stackoverflow.com/questions/1495407/…。这个技巧适用于 padding-top 和 padding-bottom 。也请停止在 cmets 中标记我，然后将其删除。
有一件事我仍然没有得到。为什么不使用padding-top: 49.49%;？至少它在比calc() 更多的浏览器中工作，并且上述方法仍然是硬编码，但使用了更冗长的语法。
您需要询问 OP，这取决于您对浏览器和代码质量的个人要求。似乎除了 IE11 之外的所有现代浏览器都可以很好地处理它：caniuse.com/#search=calc

【解决方案4】：

您正在使用

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>

【讨论】：

嗨，我试过了，但我仍然收到错误消息，没有任何显示。
立即尝试padding-top: calc(100% / 1980px * 100); 以检查仍然存在的错误
是的，我仍然收到错误消息。我想我将不得不承认并手动进行计算。
检查我的更新答案它在 chrome 使用中运行良好 padding-top: calc(980px / 1980 * 100);

【解决方案5】：

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

width: calc(500px / 50 *2)

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

【讨论】：