html - .css 不喜欢做 calc()？

Question

$(document).ready(function(){
   $("canvas").css({"border": "5px dotted white", "width": "600px", "height": "450px", "margin-left": "calc((window.innerWidth - 600px) / 2)"});
});

这主要是我遇到的格式问题。我知道我做错了，但我一直无法弄清楚该怎么做。简而言之，我正在尝试为已经存在的 Canvas 设置 margin-left，问题是 "margin-left": "calc((window.innerWidth - 600px)/2)"部分。当这部分不在其中时，其他所有部分都工作得很好，但当这段代码出现时它会立即停止工作，我认为这是错误的。

我该如何设置它的格式，以便将 margin-left 设置为窗口宽度减去 Canvas 宽度(即 600px 部分)，然后除以一半，使其均匀地位于屏幕中间。是不是公式格式错了？尝试编码是错误的吗？还是 .css 与 calc() 不同？

Answer 1

你必须将 Javascript 的 window.innerWidth 放在引号之外，让 JS 像其他人一样评估它。

或者你可以像这样使用 CSS vw 属性:

"margin-left": "calc((100vw - 600px) / 2)"

然后您不必重新评估窗口大小调整。