CSS 声明属性值计算calc()语法

前言

最近在学习小程序的项目
用到适配高度滑动时 总是满足不了多个机型

查阅资料 了解到CSS的calc()语法 更方便的实现计算后的适配宽高

css简介
calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：
< length>、< frequency>, < angle>、< time>、< percentage>、< number>、或 < integer>。

语法

//加法
height: calc(10px+ 10px);
//减法
width: calc(100% - 80px);
//乘法
height: calc(10vh * 5);
//除法
width: calc(100% / 2);

注意

在写 calc() 函数语法时，必须在每个操作之间包含空格，特别是在使用 + 和 - 操作符时，否则表达式将无效
比如：

calc(100% -288px) //此代码无效 

//正确写法
calc(100% - 100px)

使用场景

• 处理 CSS 变量
• 需要计算得到一个新的值
• 用于不同单元之间的计算，这是预处理器无法做到的
• 定位需求
• 调整网站的结构和其他元素
• 避免重复做相同的计算时

总结

CSS的calc()语法 方便我们开发中做多余且重复的操作
简化开发效率，更能兼容不同的屏幕尺寸 做好适配工作！