開篇老規(guī)矩：有用點贊+收藏+轉發(fā)，歡迎留言討論！

最近在寫小程序項目，遇到calc計算無效：

.viewOne{
    height: calc(100vh - 30rpx);
}

.viewTwo{
    height: calc(100% - 30rpx);
}

在瀏覽器查看樣式的時候，可見：

.viewOne{
    height: calc(70vh);
}

.viewTwo{
    height: calc(70%);
}

上面的明顯就不對，下面展示有效的寫法：

.viewOne{
    height: calc(~"100vh - 30rpx");
}

.viewTwo{
    height: calc(~"100% - 30rpx");
}

在瀏覽器查看頁面相關樣式屬性：

.viewOne{
    height: calc(100vh - 30rpx);
}

.viewTwo{
    height: calc(100% - 30rpx);
}

完美有效：

最后小結一下calc的使用：

1. 運算符左右兩邊要有空格；
2. 數字和單位之間不能有空格；
3. 括號與減數，被減數之間不能有空格；
4. 以上無效記得加上英文~符和雙引號。