::first-letter无法直接响应屏幕宽度，因其font-size不支持vw、clamp()等动态单位，规范限定仅接受静态值；可靠方案是用JS包裹首字并应用clamp()，辅以媒体查询降级。
::first-letter 无法直接响应屏幕宽度——它不支持 vw、clamp()、calc() 或媒体查询内的动态计算值。所有主流浏览器（Chrome/Firefox/Safari）都会静默忽略类似 p::first-letter { font-size: 4vw; } 的写法，回退到继承值或默认大小。
为什么 ::first-letter 的 font-size 不能用视口单位？
这不是浏览器 bug，而是规范限制：::first-letter 只接受“可计算的静态值”。CSS Pseudo-Elements Level 4 规范（截至 2026 年 5 月）仍未将 vw、vmin 等视口单位纳入支持范围。实测中，哪怕写成 font-size: clamp(1.2rem, 4vw, 2.5rem)，也会被完全跳过。
替代方案：用真实 DOM 节点包裹首字 + clamp()
这是目前唯一可靠、可控、无需 polyfill 的方式：
- 用 JavaScript 提取段落首字符，套一层
<span class="first-char"></span>，确保 HTML 结构干净（无前置空格/换行/标签） - 在 CSS 中对
.first-char直接使用font-size: clamp(1.2rem, 4vw, 2.5rem);—— 完全生效 - 保留原
::first-letter样式逻辑（如float: left、line-height: 1）迁移到该<span>上即可 - 若需降级兼容老设备，可叠加媒体查询作为 fallback：
@media (max-width: 768px) { .first-char { font-size: 2.2em; } }
哪些情况会让 ::first-letter 失效？
即使你没碰响应式，这些基础问题也常导致“写了没反应”：
-
<p>开头有空格、换行或注释（例如<p>\n 文本…），浏览器认为首字符是空白符，跳过匹配 - 首字符是标点（如
“、《、(），部分浏览器直接放弃触发伪元素 -
<p>被父容器设为display: inline或嵌套在<span>里 ——::first-letter仅对块级上下文有效 - 段落内第一个字符被
<strong>或<em>包裹（例如<p><strong>这</strong>是一个段落…</p>），伪元素找不到纯文本首字符
::first-letter 上硬扛；包裹 + clamp() 是唯一稳态路径。容易被忽略的是：JS 注入时机必须等 DOM 就绪且文本已渲染，否则可能包裹错位置或漏处理。 
