calc

5

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. 元素居中问题

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

桃小妖 作者 · 1月17日

有问题处欢迎指正

回复

载入中...