calc 用法以及原理

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。在页面上的任何文本，将会根据你的视口自动缩放.从而到达窗口自适应

本文借鉴 前端开发博客