calc 用法以及原理

• 2021 年 5 月 8 日
• 筆記

CSS3 的 calc() 函數允許我們在屬性值中執行數學計算操作。例如，我們可以使用 calc() 指定一個元素寬的固定像素值為多個數值的和。
它是CSS預處理器

.foo {
    width: 100px + 50px;
}

// Or using SASS variables
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

calc() 函數提供了更好的解決方案。
這裡就不得不說一點關於它的用法: calc() 函數可以用來對數值屬性執行四則運算
1.讓元素垂直居中,初學者一般是用相對或者絕對定位來實現該需求
eg. position: absolute top: 50%; left: 50%; 以及 marging-top: -150px; margin-left: -150px;
而通過calc()函數,就可以省略後面兩個 直接使用position: absolute,top: calc(50% - 150px); ,left: calc(50% - 150px);
即可達到相同目的
2.其次,使用 rem 充當基本單位，calc() 函數能夠用來創建一個基於視口的柵格。我們可以設置根元素的字體大小為視口寬度的一部分。

html {  
    font-size: calc(100vw / 30);
}

這就使得 1rem 為視口寬度的 1/30。在頁面上的任何文本，將會根據你的視口自動縮放.從而到達窗口自適應
本文借鑒 前端開發部落格