ul树状图缩进不随屏幕变化是因为默认用固定像素或em值，需改用clamp()结合CSS变量和视口单位实现响应式缩进，并通过:is()简化多层选择器、伪元素联动缩进值、绝对定位保障点击区域。
ul 树状图为什么缩进不随屏幕变化？
因为 <ul></ul> 默认用 margin-left 或 padding-left 控制缩进，这些值是固定像素或 em，不会响应视口宽度变化。直接写死 20px 或 1.5em 就做不到“自适应缩进”——缩进大小得随屏幕变小而减小，否则小屏上会挤出横向滚动条。
真正可行的思路是：用 CSS 自定义属性 + clamp() 动态算缩进值，再配合 ul 的嵌套层级计算缩进倍数。
- 避免用
rem或em直接写死多层缩进（比如ul ul { padding-left: 1.2rem; }），它们只响应根字号，不响应屏幕宽度 - 不要给每层
ul单独写媒体查询，嵌套深了维护成本爆炸 - 缩进单位必须含视口单位（
vw）或用clamp(最小值, 基准值, 最大值)锚定响应区间
用 :is() 和 :where() 简化多层 ul 缩进选择器
HTML 中树状结构常是 <ul><li><ul><li><ul>...</ul></li></ul></li></ul> 这种嵌套，手动写 ul ul、ul ul ul 很容易漏层或写错。现代 CSS 提供更健壮的写法：
ul {
--indent-base: clamp(8px, 2.5vw, 24px);
}
/* 所有嵌套 ul 都按层级乘缩进 */
ul ul { padding-left: calc(var(--indent-base) * 1); }
ul ul ul { padding-left: calc(var(--indent-base) * 2); }
ul ul ul ul { padding-left: calc(var(--indent-base) * 3); }
更简洁且可扩展的写法（需支持 :is() 的浏览器）：
立即学习“前端免费学习笔记（深入）”；
ul :is(ul, ol) {
padding-left: calc(var(--indent-base) * 1);
}
ul ul :is(ul, ol) {
padding-left: calc(var(--indent-base) * 2);
}
-
:is()比ul ul ul更易读，也避免因层级过深导致选择器失效（IE 不支持，但现代项目基本可忽略） - 如果要兼容旧环境，用
ul ul+ 明确层数上限（如最多 6 层），别依赖无限嵌套 - 缩进倍数从 1 开始而非 0，因为第一层
ul本身不缩进，子ul才开始缩
如何让箭头/连线也随缩进自适应？
纯 <ul></ul> 只负责结构，视觉连线（竖线、横线、折叠箭头）得靠伪元素或 SVG。关键点是：这些图形的尺寸和位置必须和缩进值联动，否则缩进变了，线就错位。
推荐方案：用 background-image 绘制垂直连接线，宽度用 var(--indent-base) 控制间距：
ul > li {
position: relative;
}
ul > li::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--indent-base) / 2);
width: 1px;
background-color: #ccc;
}
- 竖线放在
li上而非ul，避免被子ul的padding-left推偏 - 横线或拐角需额外用
::after+transform，但坐标必须基于--indent-base计算，不能写死20px - 折叠箭头建议用 inline SVG 并设
width="1em"，再通过font-size控制大小，比px图片更灵活
移动端点击区域太小？别只靠 padding
缩进变小后，li 内容区变窄，用户点折叠按钮容易误触。单纯加 padding 会撑开缩进区域，破坏树形对齐。
- 把交互区域（如展开按钮）用
position: absolute脱离文档流，再用inset-inline-start定位到缩进边界附近 - 用
min-width和aspect-ratio保证按钮在小屏下仍有足够点击面积（例如min-width: 36px; aspect-ratio: 1） - 避免用
font-size缩小按钮文字来适配——先保点击面积，再调文字大小
缩进自适应不是调几个 CSS 值就完事，它牵扯布局、交互、视觉三者的联动。最容易被忽略的是：缩进值一旦用 vw，就得同步检查所有依赖它的伪元素、SVG、JS 计算逻辑是否跟着更新——否则缩进收缩了，连线还卡在老位置。
