::marker 无法真正响应式，仅支持颜色切换等轻量适配；需用 ::before + counter() 实现完整响应式列表符号控制。
直接用 ::marker 无法实现真正意义上的“响应式列表符号样式”——它不支持媒体查询内联写法、不能动态缩放符号尺寸、也不响应视口变化做布局调整。所谓“响应式美化”，实际是靠组合策略：用 ::marker 做基础颜色/字号微调，再用 @media + ::before 降级兜底或接管复杂逻辑。
为什么 ::marker 本身不响应视口变化
::marker 是静态伪元素，其样式规则一旦解析就固定，不监听 resize 或 orientationchange；font-size 在它身上表现不稳定（Safari 16.4 才开始有限支持，Chrome 100+ 才可靠），且即使设为 em 或 rem，也只随父 li 字号变，不随屏幕宽度自动缩放。
- 写
@media (max-width: 768px) { li::marker { font-size: 0.8em; } }语法合法，但多数浏览器会忽略该规则中的font-size（尤其 Safari） -
color可响应媒体查询，但仅限颜色切换，无法解决符号挤占、错位等真实响应问题 - 试图用
transform: scale()或vw单位控制大小？规范禁止，浏览器静默丢弃
::marker 能安全用在哪几类响应场景
仅适用于对一致性要求高、变化幅度小的轻量适配：
- 暗色模式切换：
@media (prefers-color-scheme: dark) { li::marker { color: #a1a1a1; } }——color全平台稳定生效 - 字体缩放适配：
li { font-size: clamp(0.875rem, 1.25vw, 1rem); } li::marker { font-size: 1em; }—— 此时::marker继承li缩放后的字号（前提是浏览器支持font-size） - 多语言排版微调：
[dir="rtl"] li::marker { content: "• "; }——content+dir属性组合可用，但需注意 Unicode 字符在不同系统字体中渲染一致
真正响应式的替代方案：用 ::before + counter() 接管
当需要符号随屏幕宽度缩放、带背景、可定位、或与文本行高严格对齐时，必须放弃 ::marker，改用 list-style: none + li::before：
- 先禁用原生标记：
ul, ol { list-style: none; } - 用
counter()生成编号：ol { counter-reset: item; } ol li { counter-increment: item; } - 在
::before中自由控制：li::before { content: counter(item) ". "; display: inline-block; width: 2em; text-align: right; margin-right: 0.5em; } - 响应式缩放：
@media (max-width: 480px) { li::before { font-size: 0.9em; width: 1.5em; } }—— 这里所有属性都有效 - 图标/emoji 安全写法：
content: "✓ ";（用 Unicode 点阵字符，避免 emoji 字体缺失回退成方块）
容易被忽略的兼容性断层点
不是所有“现代浏览器”都真正支持 ::marker 的响应行为：
- Safari 15.4 支持
color，但font-size和content仍不可靠；Safari 16.4 是第一个较稳定版本 - Android WebView（尤其旧版 Chrome 内核）常把
::marker当作无效选择器直接跳过，不报错也不渲染 - 企业内网 IE/Edge Legacy 用户虽少，但若项目需兼容，
::marker必须配合@supports检测并提供::before回退 -
list-style-position: inside会影响::marker的对齐基准，但在响应式布局中它和text-align冲突频繁，建议统一用outside+padding-left控制缩进
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
