mindmap
    id1[相对单位]
        id1-1[视口相关单位]
        id1-2[vw 视口宽度单位]
        id1-3[vh 视口高度单位]
        id1-4[vmin 视口最小尺寸单位]
        id1-5[vmax 视口最大尺寸单位]
        id1-6[字体相关单位]
        id1-7[em 相对父元素字体大小]
        id1-8[rem 相对根元素字体大小]
        id1-9[ex 相对当前字体x高度]
        id1-10[ch 相对数字"0"的宽度]
        id1-11[百分比单位]
        id1-12[宽度百分比]
        id1-13[高度百分比]
        id1-14[字体大小百分比]
        id1-15[边距和填充百分比]

mindmap
    id2[绝对单位]
        id2-1[像素单位]
        id2-2[px 像素单位]
        id2-3[物理像素与CSS像素]
        id2-4[设备像素比 DPR]
        id2-5[印刷单位]
        id2-6[pt 点]
        id2-7[pc 派卡]
        id2-8[in 英寸]
        id2-9[cm 厘米]
        id2-10[mm 毫米]

mindmap
    id3[函数计算单位]
        id3-1[calc  函数]
        id3-2[基本语法和使用]
        id3-3[混合单位计算]
        id3-4[响应式布局应用]
        id3-5[min  和max  函数]
        id3-6[最小值函数应用]
        id3-7[最大值函数应用]
        id3-8[响应式尺寸限制]
        id3-9[clamp  函数]
        id3-10[值范围限制]
        id3-11[响应式字体大小]
        id3-12[自适应布局控制]

mindmap
    id4[特殊响应式单位]
        id4-1[容器查询单位]
        id4-2[cqw 容器查询宽度]
        id4-3[cqh 容器查询高度]
        id4-4[cqi 容器查询内联尺寸]
        id4-5[cqb 容器查询块尺寸]
        id4-6[cqmin和cqmax]
        id4-7[动态视口单位]
        id4-8[dvw 动态视口宽度]
        id4-9[dvh 动态视口高度]
        id4-10[dvi 动态视口内联尺寸]
        id4-11[dvb 动态视口块尺寸]
        id4-12[dvmin和dvmax]
        id4-13[逻辑属性单位]
        id4-14[lh 行高单位]
        id4-15[rlh 根元素行高单位]
        id4-16[cap 大写字母高度]
        id4-17[ic 表意文字单位]

mindmap
    id5[响应式单位应用场景]
        id5-1[布局系统]
        id5-2[网格布局中的单位应用]
        id5-3[弹性布局中的单位应用]
        id5-4[多列布局中的单位应用]
        id5-5[字体系统]
        id5-6[响应式字体大小]
        id5-7[行高和间距控制]
        id5-8[可访问性考虑]
        id5-9[间距系统]
        id5-10[边距和填充的响应式控制]
        id5-11[间隙 gap 的响应式设置]
        id5-12[边框和轮廓的响应式处理]

mindmap
    id6[单位转换和计算]
        id6-1[单位转换原理]
        id6-2[相对单位的计算基准]
        id6-3[视口单位的计算方式]
        id6-4[百分比单位的参考对象]
        id6-5[浏览器计算机制]
        id6-6[CSS解析和计算过程]
        id6-7[回流和重绘的影响]
        id6-8[性能优化考虑]
        id6-9[实际应用计算]
        id6-10[响应式断点设计]
        id6-11[媒体查询中的单位使用]
        id6-12[移动优先设计策略]

mindmap
    id7[最佳实践和兼容性]
        id7-1[单位选择策略]
        id7-2[不同场景下的单位选择]
        id7-3[单位组合使用技巧]
        id7-4[避免的单位使用陷阱]
        id7-5[浏览器兼容性]
        id7-6[现代浏览器支持情况]
        id7-7[旧版浏览器回退方案]
        id7-8[渐进增强策略]
        id7-9[性能优化]
        id7-10[减少布局抖动]
        id7-11[优化渲染性能]
        id7-12[内存使用考虑]

mindmap
    id8[高级应用技巧]
        id8-1[自定义属性 CSS变量]
        id8-2[变量与响应式单位结合]
        id8-3[动态单位计算]
        id8-4[主题切换应用]
        id8-5[动画和过渡]
        id8-6[响应式动画单位]
        id8-7[平滑过渡效果]
        id8-8[性能优化技巧]
        id8-9[现代CSS框架]
        id8-10[Tailwind CSS中的单位应用]
        id8-11[Bootstrap中的响应式单位]
        id8-12[其他流行框架的实现方式]