标签云必须用flex布局实现自适应：设display: flex、flex-wrap: wrap、gap控制间距，子项flex-shrink: 0；尺寸用em/rem/vmin/clamp()等相对单位；响应式按容器宽度而非设备断点；IE11需inline-block+JS降级。
标签云容器必须用 flex 布局
纯靠 display: inline-block 或浮动实现的标签云，在小屏幕下极易换行错乱、间隙不可控，且无法真正“自适应宽度”。flex 是唯一能兼顾流式排列、自动折行、等距对齐的方案。
关键点：flex-wrap: wrap 允许换行，justify-content: center 或 flex-start 控制水平对齐，gap 替代 margin 实现响应式间距（注意 Safari 14.1+ 才完全支持 gap 在 flex 容器中）。
- 容器设为
display: flex，不要设固定宽度，让其自然撑满父容器 - 子元素（每个标签）设
flex-shrink: 0，防止被压缩变形 - 避免给子元素设
width或min-width，否则会破坏自适应逻辑 - 若需最小字号保底，用
font-size: clamp(0.75rem, 2.5vw, 1rem)，而非固定值
单个标签的尺寸必须用相对单位控制
固定像素（如 padding: 8px 16px）在手机上会显得过大，PC 上又过小。所有尺寸都应基于视口或父容器动态缩放。
推荐组合：padding 用 em 或 rem，font-size 用 vmin 或 clamp()，border-radius 用 em。
-
padding: 0.3em 0.8em比px更协调，随字体缩放自动调整 - 慎用
vw单独控制 padding——它不随字体变化，易导致文字被截断 - 如果标签带图标（如
::before），图标尺寸也得用em，否则和文字错位 - 避免
max-width: 100%加在标签上——flex 子项默认不会溢出，加了反而可能触发意外收缩
响应式断点要按内容密度而非设备尺寸切分
用 @media (max-width: 768px) 这类通用断点容易失效：有些平板横屏比桌面窄，有些折叠屏展开后比普通笔记本还宽。真正该监听的是“标签是否开始挤占两行以上”或“单行容纳数是否低于阈值”。
更可靠的做法是用容器宽度驱动样式变化，例如：
label-cloud {
--min-tags-per-row: 4;
}
@media (max-width: calc(100vw / var(--min-tags-per-row) * 3)) {
label-cloud a { font-size: clamp(0.6rem, 1.8vmin, 0.9rem); }
}
- 优先用
vmin而非vw控制字号，避免竖屏时文字过大 - 可在 JS 中监听容器
offsetWidth变化，动态更新 CSS 变量，实现更精细控制 - 别在断点里重写整个 flex 结构（比如切到 grid），容易引发重排抖动
IE11 兼容需手动 fallback 到 inline-block + JavaScript 补齐
IE11 不支持 gap、clamp()、flex-wrap 的部分行为（如 align-content），且 vmin 支持不完整。若必须兼容，不能只靠 autoprefixer。
- 用
display: inline-block作为基础布局，配合vertical-align: top - 用 JS 计算容器宽度与标签平均宽度，动态插入
margin-right模拟 gap - 字号降级为
font-size: 0.8rem，放弃响应式缩放，保证可读性 - 移除所有
flex-grow/flex-basis相关声明，IE11 对它们解析不稳定
实际效果差异往往藏在 flex-shrink: 0 和 gap 的组合细节里——少设一个，小屏下就可能多折一行，用户扫一眼就滑走了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
