CSS calc（）函数不使用'；它似乎不能正常工作

在下面的图片中，视口宽度为400px，进度条宽度为300px

如果我通过中间的硬编码值来安排PrimeStruBar，它工作得很好，请参阅下面的代码和图片：

@media (max-width:999px) {
    #containerProgressbarPageLoad{
        position:relative;
        margin-left: 50px;
        margin-right: 50px;
    }
}

@media (max-width:999px) {
    #containerProgressbarPageLoad{
        position:relative;
        margin-left: calc(50vw-150px);
        margin-right: calc(50vw-150px);
    }
}

但是如果我使用

calc（）

函数来完成此工作，我将得到一个无法解释的结果，请参见下面的代码和图片：

@media (max-width:999px) {
    #containerProgressbarPageLoad{
        position:relative;
        margin-left: 50px;
        margin-right: 50px;
    }
}

@media (max-width:999px) {
    #containerProgressbarPageLoad{
        position:relative;
        margin-left: calc(50vw-150px);
        margin-right: calc(50vw-150px);
    }
}

为什么calc不返回50px？50vw（=200px）-150px应为50px。

---

在

calc

中的

+

和

-

运算符必须始终用空格包围

您的

calc（）

声明中需要空格：

calc（50vw-150px）

not

calc（50vw-150px）

例如：

@介质（最大宽度：999px）{
#containerProgressbarPageLoad{
背景：红色；
位置：相对位置；
左边距：计算（50vw-150px）；
保证金权利：计算（50vw-150px）；
}
}

containerProgressbarPageLoad