calc

桃小妖發表於2019-01-17

calc( )的定義

用於動態計算長度值
可以用在任何長度,數值,時間,角度,頻率等處

calc( )的運算子

＋ － ＊ ／

width:calc(50% + 15px);
height:calc(100% - 20px);
width:calc(15 * 4px);
height:calc(100% / 4);

⚠️運算子兩邊需要有空格
⚠️使用 * / 運算子時,必須保證有一個值為數值型別

calc( )使用區分

//1. css中     
    width:calc(100% - 20px);
//2. scss中 
    $base-font-size: 37.5px;
    @function px2rem($px) {
        @return ($px / $base-font-size) * 1rem / 2;
    }
    width:calc(100% - #{px2rem(15px)});
//3. less中
    width:calc(~"100% - 15rem");
//4. sass中
    width: calc(1rem - 2px);
    width: calc((100% - #{$a}*#{$b})/#{$c} );
    line-height: calc(1*20/14);
//⚠️sass中calc 不能單獨識別“/”,也就是不能單獨識別除法，解決這種問題有兩種做法：0+表示式，或者1*表示式

calc( )應用例子

  1. 在移動端／pc端，會有一屏展示，並區域性實現滾動的效果，此時使用calc( )進行滾動區域高度計算，就可以完美適應所有機型，而不需要再使用js動態計算
  2. 等分割槽域或等比區域的頁面劃分，通常使用彈性盒子，但是calc( )也可以很好解決這個問題
  3. 元素居中問題

相關文章