使用 calc() 可实现动态响应式布局，通过数学运算混合单位如 %、px、vw 等。例如 width: calc(100% - 40px) 可让元素宽度自适应并留边距；font-size: calc(16px + 0.5vw) 实现字体平滑缩放；在 Flexbox 或 Grid 中，结合固定宽度与 calc() 可使主内容区自动填充剩余空间，如 width: calc(100% - 200px)；需注意运算符两侧加空格、避免嵌套及不支持负单位直接写法，现代浏览器兼容性良好，合理使用可减少媒体查询，提升布局灵活性。
在CSS中使用 calc() 可以实现动态响应式尺寸，它允许你在设置属性值时进行数学计算，混合使用不同单位（如百分比、像素、视口单位等），从而更灵活地控制元素的尺寸。
基本语法与单位混合
calc() 支持加法、减法、乘法和除法（注意：+ 和 - 两侧需有空格）。你可以结合 %, px, vw, rem 等单位来创建响应式布局。
例如，让一个盒子宽度占满父容器，但左右各留 20px 边距：
width: calc(100% - 40px);这样无论屏幕多宽，元素都会自动减去 40px，实现动态适配。
立即学习“前端免费学习笔记（深入）”；
结合视口单位实现流体布局
使用 vw（视口宽度单位）可以让尺寸随屏幕变化。比如设置字体大小随屏幕宽度调整：
font-size: calc(16px + 0.5vw);这表示基础字号为 16px，屏幕越宽，字体略大一点，实现平滑缩放。
同样可用于宽度：
多个微信小程序源码合集
下载
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加
在弹性容器或栅格系统中，这种写法能避免溢出，同时保持内边距可读性。
在Flexbox或Grid中的应用
在弹性布局中，有时需要某个元素占据剩余空间。可以用 calc() 配合固定尺寸：
.sidebar { width: 200px; }.main-content { width: calc(100% - 200px); }
当侧边栏固定为 200px 时，主内容区自动填充剩余宽度，适配不同屏幕。
在 Grid 布局中也可类似处理：
grid-template-columns: 200px calc(100% - 200px);注意事项与兼容性
calc() 在现代浏览器中支持良好，但要注意：
- 运算符前后必须有空格，如 calc(100% - 20px)，否则无效
- 不能用作负值的直接单位，如 margin-left: calc(-1 * 20px) 要写成 -20px
- 嵌套 calc() 通常不必要，浏览器会自动解析
合理使用 calc() 能减少媒体查询的频繁切换，让响应式更自然流畅。
基本上就这些，关键在于灵活组合单位，让尺寸真正“动”起来。
