问题标签 [css-calc]

我正在尝试制作一个小动画，但我未能使其响应，因为“calc()”似乎不适用于 .animate。这里有另一种解决方案吗？

谨此致以最诚挚的问候， 贝尔纳多

编辑：我正在尝试为出现在我的网站 onchange() 下拉菜单上的消息设置动画。它应该是响应式的，所以这就是我使用 calc() 的原因。

那么有没有一种替代方法可以让它在没有 calc() 的情况下以另一种方式响应？

我有一个带有两个孩子的块元素，我希望它们每个占据一半的空间，减去它们之间固定大小的间隙。这应该很容易calc()：

在上面的代码段中，我有一个 300px 的父级，其子级应该是50% - 5px= 145px 宽，加上每个 5px 的边距。这意味着两个孩子，加上他们的边距，应该正好占据 300px。当我以这种方式设置时，它们会包装。如果我为每个孩子减去额外的 2 个像素，它们似乎完全填充了空间，即使它们每个仅测量 148 像素（包括边距）。额外的像素从何而来？

请帮助我找出为什么 CSS 变量中的算术运算会破坏代码。

我从一个带有一条规则的简单 CSS 文件开始：

在浏览器中，它按原样工作：字体大小为 16px，行高为 32px，字体本身为 Arial。

然后我添加了变量：

它也有效；认为行高是 16px，因为我使它等于字体大小。

但是当我乘以第二个值时，字体声明停止工作：

所有属性font-size、line-height和font-family都设置为浏览器默认值。

如果我将font速记属性拆分为三个不同的速记属性，代码将再次正常工作：

前面的代码示例有什么问题，有没有办法让它在不拆分为普通属性的情况下工作？

为什么这个calc(100vw/4)有效，但以下都无效？

1. calc(100vw/4-(10-4))
2. calc(100vw/4-(10px-4))
3. calc(100vw/4-(10px-4px))
4. calc(100vw/4-calc(10px-4px))

如何管理在 SASS 循环calc(100vw/x-(10px-x))中x被替换的表达式才能工作？

我正在使用 Sass 编写一个简单的网格布局。我试图用calc()相对单位来确定宽度%。为了测试样式，我使用了一个简单的 HTML 文件。

问题：在 Chrome 上使用开发工具检查结果，显示calc()调用的宽度声明被丢弃为Invalid property value. 这是代码：

src.html

src.scss

生成的CSS：

考虑下面的代码，其中<my-item>总是有一个固定的200px内部宽度<iron-list grid>

我打算通过设置with的宽度始终显示每行 2 秒（可以拉伸）来做出<my-item>响应。我注意到 CSS似乎没有按预期工作。<my-item><my-item>width: calc(50% - 32px)calc()

如何设置内部 Polymer 组件的响应宽度<iron-list grid>？

让我首先向您展示我将如何在 SCSS 中执行此操作：

这将编译为：

基本上 SCSS 允许我将减号-与变量连接起来，以便将其转换为负值。

是否可以使用 CSS 变量来实现这一点？

我正在尝试使 div 扩展到父级的宽度。父母有一个calc()。为什么孩子不扩大到父母的宽度？如果我删除 calc 并设置一个实际值，它工作正常。有什么技巧可以让它工作吗？

我假设孩子也在跑步calc(100% - 200px)

我正在尝试使用此处的解决方案以最小尺寸动态调整文本大小。

您可以通过使用公式并包括视口宽度来做到这一点。

这将最小字体大小设置为 7px，并根据视口宽度将其放大 0.5vw。

问题是我正在使用LESS预编译器。我相信它正在calc()编译时评估函数并解析为静态px值。我已经在页面上使用 Chrome 开发工具确认了这一点，无论有无LESS.

少：

没有更少：

那么，我怎样才能让我编译的 CSS 保留这个calc()功能呢？

我正在尝试将 div 缩放等于 1/2.9 的量。我可以将它输入为小数，但它不会像分数那样准确。

此代码适用于 IE 和 Chrome：

但是，使用calc()，它仅适用于 Chrome：

IE 只是忽略了我的calc(1/2.9). 它不会缩放容器。

我可以做些什么来使 IE 正确呈现calc()吗？