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