mindmap
    id1[媒体查询基础概念]
        id1-1[什么是媒体查询]
        id1-2[媒体查询的定义与作用]
        id1-3[响应式设计中的重要性]
        id1-4[媒体查询的发展历史]
        id1-5[媒体查询语法结构]
        id1-6[@media 规则语法]
        id1-7[媒体类型与媒体特性]
        id1-8[逻辑运算符的使用]
        id1-9[媒体查询工作原理]
        id1-10[浏览器解析机制]
        id1-11[条件匹配流程]
        id1-12[性能优化考虑]

mindmap
    id2[媒体类型详解]
        id2-1[常用媒体类型]
        id2-2[all - 所有设备]
        id2-3[screen - 屏幕设备]
        id2-4[print - 打印设备]
        id2-5[speech - 语音合成器]
        id2-6[特殊媒体类型]
        id2-7[tv - 电视设备]
        id2-8[projection - 投影仪]
        id2-9[handheld - 手持设备]
        id2-10[braille - 盲文设备]
        id2-11[媒体类型组合使用]
        id2-12[多类型同时指定]
        id2-13[类型间的优先级]
        id2-14[兼容性处理]

mindmap
    id3[媒体特性详解]
        id3-1[视口相关特性]
        id3-2[width / min-width / max-width]
        id3-3[height / min-height / max-height]
        id3-4[aspect-ratio]
        id3-5[orientation]
        id3-6[显示特性]
        id3-7[resolution]
        id3-8[scan]
        id3-9[grid]
        id3-10[update]
        id3-11[颜色相关特性]
        id3-12[color]
        id3-13[color-index]
        id3-14[monochrome]
        id3-15[color-gamut]
        id3-16[交互特性]
        id3-17[hover]
        id3-18[pointer]
        id3-19[any-hover]
        id3-20[any-pointer]
        id3-21[其他重要特性]
        id3-22[display-mode]
        id3-23[prefers-color-scheme]
        id3-24[prefers-reduced-motion]
        id3-25[prefers-contrast]

mindmap
    id4[逻辑运算符]
        id4-1[AND 运算符]
        id4-2[多个条件同时满足]
        id4-3[特性组合查询]
        id4-4[复杂条件构建]
        id4-5[OR 运算符]
        id4-6[逗号分隔多个查询]
        id4-7[条件分支处理]
        id4-8[备用方案设计]
        id4-9[NOT 运算符]
        id4-10[条件取反]
        id4-11[排除特定设备]
        id4-12[反向匹配策略]
        id4-13[ONLY 运算符]
        id4-14[防止旧浏览器误解析]
        id4-15[兼容性处理]
        id4-16[最佳实践]

mindmap
    id5[响应式断点设计]
        id5-1[常用断点标准]
        id5-2[移动设备断点]
        id5-3[平板设备断点]
        id5-4[桌面设备断点]
        id5-5[大屏设备断点]
        id5-6[断点策略选择]
        id5-7[内容优先断点]
        id5-8[设备优先断点]
        id5-9[混合断点策略]
        id5-10[自定义断点设计]
        id5-11[基于内容设计断点]
        id5-12[基于用户行为设计]
        id5-13[渐进增强策略]

mindmap
    id6[媒体查询应用场景]
        id6-1[布局调整]
        id6-2[网格系统响应式]
        id6-3[弹性布局适配]
        id6-4[导航菜单响应式]
        id6-5[字体与排版]
        id6-6[字体大小响应式]
        id6-7[行高与间距调整]
        id6-8[排版优化]
        id6-9[图片与媒体]
        id6-10[响应式图片]
        id6-11[视频嵌入适配]
        id6-12[背景图片处理]
        id6-13[组件响应式]
        id6-14[按钮组件适配]
        id6-15[表单元素优化]
        id6-16[卡片布局响应]

mindmap
    id7[高级媒体查询技巧]
        id7-1[嵌套媒体查询]
        id7-2[CSS 预处理器中的嵌套]
        id7-3[模块化媒体查询]
        id7-4[维护性优化]
        id7-5[动态媒体查询]
        id7-6[JavaScript 与媒体查询交互]
        id7-7[实时检测设备变化]
        id7-8[程序化样式切换]
        id7-9[性能优化]
        id7-10[减少媒体查询数量]
        id7-11[合并相似查询]
        id7-12[加载策略优化]

mindmap
    id8[浏览器兼容性]
        id8-1[主流浏览器支持]
        id8-2[Chrome/Edge 支持情况]
        id8-3[Firefox 支持情况]
        id8-4[Safari 支持情况]
        id8-5[移动浏览器支持]
        id8-6[iOS Safari]
        id8-7[Android Chrome]
        id8-8[其他移动浏览器]
        id8-9[兼容性处理方案]
        id8-10[渐进增强策略]
        id8-11[优雅降级方案]
        id8-12[特性检测替代]

mindmap
    id9[实际项目实践]
        id9-1[移动优先设计]
        id9-2[移动优先原则]
        id9-3[渐进增强实现]
        id9-4[性能优化考虑]
        id9-5[多设备适配]
        id9-6[平板设备优化]
        id9-7[桌面设备完善]
        id9-8[大屏设备扩展]
        id9-9[无障碍访问]
        id9-10[高对比度模式支持]
        id9-11[减少动画偏好]
        id9-12[语音设备兼容]

mindmap
    id10[未来发展趋势]
        id10-1[新特性展望]
        id10-2[容器查询]
        id10-3[层叠层与媒体查询]
        id10-4[新的媒体特性提案]
        id10-5[工具与框架]
        id10-6[CSS 框架中的媒体查询]
        id10-7[构建工具集成]
        id10-8[测试工具支持]
        id10-9[最佳实践演进]
        id10-10[现代响应式设计模式]
        id10-11[性能与用户体验平衡]
        id10-12[可维护性策略更新]