css3使用calc根据屏幕长宽等计算出值的用法

CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。

.foo {
  width: calc(100px + 50px);
}

还可以使用父div宽度来计算（以下例子，父级div的宽度减去50px）：

.foo {
    width: calc(100% - 50px);
}

其他示例：

其中50vw表示50%的viewport width(屏幕或者说可视屏幕的宽度)

100vh，意思就是100%的高度。

.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

嵌套使用：

.foo {
    width: calc( 100% / calc(100px * 2) );
}

注意事项

经过测试，表达式中的加减乘除（+-*/）等符号，前后都要留一个空格，否则是不行的，需要注意！