HTML5 的 <mark> 标签无响应式属性，需用 CSS 实现：通过 clamp() 控制字号、em 单位设置内边距、显式定义颜色、包裹容器扩展点击区域、调整 line-height 防裁切，并坚持语义化使用。
HTML5 里没有 <mark> 的响应式属性，得靠 CSS 控制显示效果
<mark> 标签语义明确——标记文档中需要高亮的重点内容，但它本身不带任何尺寸、颜色或响应式逻辑。浏览器默认只给它一个黄色背景，且在小屏上可能溢出、文字换行异常、甚至遮挡相邻元素。
真正起作用的是 CSS，尤其是结合媒体查询和相对单位：
- 用
font-size: clamp(0.875rem, 4vw, 1.125rem)让字号随视口平滑缩放，避免小屏文字撑破容器 - 给
<mark>加padding: 0.15em 0.3em（用em而非px），确保内边距随字体自适应 - 必须设
background-color和color，否则深色模式下可能不可读；iOS Safari 对默认黄色背景渲染偏浅，建议显式定义 - 慎用
white-space: nowrap—— 它会让长高亮文本在窄屏上横向滚动，破坏阅读流
移动端点击区域太小？给 <mark> 套一层可点击容器更稳妥
原生 <mark> 不是交互元素，touch-action 和点击热区默认仅覆盖文字本身。在手机上点不准、误触率高，尤其当它嵌在段落中间时。
推荐做法是包裹一层语义中性但支持交互的标签：
立即学习“前端免费学习笔记（深入）”；
<p>这段话里有<span class="highlight-trigger"><mark>关键术语</mark></span>需要强调。</p>
然后用 CSS 扩展点击区域：
-
.highlight-trigger { display: inline-block; padding: 0.25em 0.5em; margin: -0.25em 0; }—— 向上/下各“吃”掉 0.25em，视觉无感但点击更容错 - 加
cursor: pointer和user-select: none提升反馈感，防止误选 - 若需点击后跳转或展开解释，直接给
.highlight-trigger绑click事件，别绑在<mark>上（IE 和旧 Android WebView 可能不触发）
多设备下背景高亮被裁切？检查父容器的 line-height 和 overflow
常见现象：在 iPad 或折叠屏上，<mark> 的上下边缘被截断，看起来像“被削掉一截”。根本原因是父级 <p> 或 <div> 的 line-height 过小，或设置了 overflow: hidden。
- 优先用
line-height: 1.4（无单位）而非line-height: 20px，确保行高随字体缩放 - 若父容器有
max-height或height固定值，<mark>的 padding 可能被剪掉，改用min-height或移除硬性限制 - 某些安卓浏览器对
inline元素的vertical-align渲染异常，可强制加vertical-align: baseline对齐基线 - 真机调试时重点看 Chrome DevTools 的 “Rendering” 面板 → 勾选 “Layer borders”，确认高亮是否被强制合层导致裁切
语义正确比样式炫酷更重要：别用 <span> + class 替代 <mark>
有人为图控制方便，全程用 <span class="hl"> 实现高亮效果。这在视觉上可行，但丢掉了 HTML5 的语义价值：屏幕阅读器不会把 <span> 当作“被标记的重点”处理，搜索引擎也可能弱化其权重。
- 坚持用
<mark>，再通过mark { /* your styles */ }统一接管样式，保持语义与表现分离 - 如果需要多种高亮色（如黄色表引用、蓝色表定义、粉色表警告），用
<mark class="ref">等扩展类名，而非放弃<mark> - 注意 WCAG 2.1 要求：高亮背景与文字对比度至少 4.5:1，深色模式下需额外提供
@media (prefers-color-scheme: dark)规则重置颜色
响应式标注真正的难点不在写几行媒体查询，而在于理解 <mark> 是内联文本级元素——它的行为受制于行盒（line box）、父容器格式化上下文、以及不同引擎对 inline 盒模型的细微差异。测的时候别只看桌面 Chrome，务必在 iOS Safari、Samsung Internet 和低端安卓 WebView 上实机点一点、缩一缩、横竖屏切一切。
