CSS calc（）函數似乎無法正常工作

Question

在下面的圖片中，視口寬度爲400px，進度條的寬度爲300px。

如果我安排通過硬編碼值在它完美的作品中間的進度，看代碼和圖片下面：

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

但如果我使用calc()功能做這個工作，我將獲得一股莫名的結果，請參見下面的代碼和圖片：

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

爲什麼不計算回報50px？ 50vw（= 200px）-150px應該是50px。

Answer 1

您需要在您的calc()聲明空間：

calc(50vw - 150px)不calc(50vw-150px)

EG：

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

<div id="containerProgressbarPageLoad">containerProgressbarPageLoad</div>

Answer 2

的+和-運營商在calc必須由空格包圍。