纯 CSS 响应式文字切换

响应式页面里，同一位置有时需要展示不同文案：窄屏写「手机端」，宽屏写「桌面端」。第一反应往往是 window.resize 监听加 JS 改 DOM——其实用 CSS 媒体查询 就能做到，无需脚本、不阻塞渲染，对 SEO 和首屏也更友好。

本文对比两种纯 CSS 写法，并说明各自适用场景。示例断点统一为：

• 手机：< 640px
• 平板：640px ~ 1023px
• 桌面：≥ 1024px

方案一：伪元素 + content

HTML 里放一个空元素（或只有装饰性内容），真正显示的文案写在 CSS content 里，按断点覆盖：

<p class="responsive-text" aria-label="随视口变化的提示文字"></p>

aria-label 给读屏软件提供可访问的固定描述；视觉文案由 ::before 承担。

用 SCSS mixin 可以避免重复写媒体查询：

$bp-tablet: 640px;
$bp-desktop: 1024px;

@mixin responsive-text($mobile, $tablet: null, $desktop: null) {
  &::before {
    content: $mobile;
  }

  @if $tablet {
    @media (min-width: $bp-tablet) {
      &::before {
        content: $tablet;
      }
    }
  }

  @if $desktop {
    @media (min-width: $bp-desktop) {
      &::before {
        content: $desktop;
      }
    }
  }
}

.responsive-text {
  @include responsive-text(
    "📱 手机端：窄屏阅读体验",
    "📟 平板端：中等宽度布局",
    "🖥️ 桌面端：宽屏完整展示"
  );
}

编译后的核心 CSS 等价于：

.responsive-text::before {
  content: "📱 手机端：窄屏阅读体验";
}

@media (min-width: 640px) {
  .responsive-text::before {
    content: "📟 平板端：中等宽度布局";
  }
}

@media (min-width: 1024px) {
  .responsive-text::before {
    content: "🖥️ 桌面端：宽屏完整展示";
  }
}

优点：HTML 极简，改文案只动样式。局限：content 只能是字符串，无法嵌入 <em> 等富文本标签。

方案二：多段 span + display 切换

需要高亮关键词、换行或内联标签时，把各断点文案写成真实 DOM，用 display 控制显隐：

<p class="responsive-spans">
  <span class="is-mobile">当前宽度 < 640px，显示<em>手机</em>文案。</span>
  <span class="is-tablet">当前宽度 640px ~ 1023px，显示<em>平板</em>文案。</span>
  <span class="is-desktop">当前宽度 ≥ 1024px，显示<em>桌面</em>文案。</span>
</p>

.responsive-spans {
  span {
    display: none;
  }

  .is-mobile {
    display: inline;
  }

  @media (min-width: 640px) {
    .is-mobile { display: none; }
    .is-tablet { display: inline; }
  }

  @media (min-width: 1024px) {
    .is-tablet { display: none; }
    .is-desktop { display: inline; }
  }
}

优点：支持富文本、SEO 友好的真实文本（爬虫能索引到当前可见段）。代价：HTML 略冗长，三份文案都要维护。

如何选择

两种方案都不触发回流中的脚本，性能友好，也适合 SSR 静态页。

交互演示

博客内的 REPL 预览区只有约 300px 宽，视口 @media 与容器 @container 的 640 / 1024 断点都凑不齐。下方用滑块设定「逻辑宽度」，由 CSS 按档位切换文案（断点已缩小为 180px / 260px 以适配预览区；正文方案仍为 640 / 1024）。

拖动滑块或点预设按钮，观察文字与「当前档位」变化：

将上文代码接入你的页面并部署后，拖窄浏览器窗口，或使用开发者工具的设备模拟，即可验证真实视口的 @media 断点效果。

小结

• 用 @media (min-width) 按断点覆盖 content 或切换 display，即可实现无 JS 的响应式文案
• 纯字符串标语用 ::before + mixin 最省事；富文本用多段 span
• 伪元素内容对读屏不友好，务必补充 aria-label 或选用真实 DOM 方案