能，但必须将整个伪元素选择器包进@media块中，不可仅包裹content声明；需为不同断点分别定义互斥规则，用px单位，且须配viewport meta标签。
media 查询里写 content 能不能切换伪元素文字？
能，但必须把整个伪元素选择器包进 @media 块里，不能只包 content 声明。常见错误是这样写：
.nav-toggle::before {
content: "☰";
}
@media (max-width: 768px) {
.nav-toggle::before { content: "✕"; }
}
看着没问题，但实际可能不生效——因为浏览器解析时，若多个规则权重相同，后声明的会覆盖前声明；而你没显式设置小屏下的初始状态，导致切换逻辑断裂。
正确做法是：为不同断点分别定义完整规则，确保优先级可控：
@media (min-width: 769px) {
.nav-toggle::before { content: "☰"; }
}
@media (max-width: 768px) {
.nav-toggle::before { content: "✕"; }
}
- 两个媒体查询互斥，不会冲突
- 必须用
px单位，不能用em或rem，否则部分浏览器（尤其 Safari iOS）可能忽略 -
content只支持字符串、attr()、url()和计数器，不支持 CSS 变量或 JS 表达式
为什么用 content 切换图标不如直接切 DOM 元素？
因为 content 是纯视觉层，无法绑定事件、不被屏幕阅读器识别、点击热区需额外设 display 和尺寸。比如你写了：
.nav-toggle::before { content: "☰"; }
但没加 display: inline-block 和 width/height，那这个“☰”实际可点击区域极小，甚至为 0。
更可靠的做法是用真实元素 + display 控制显隐：
- HTML 中放两个
<span></span>，分别标 classicon-menu和icon-close - CSS 用
@media (max-width: 768px)控制哪个display: block，哪个display: none - 图标用 SVG 替代 Unicode，避免字体加载失败或渲染偏移
display: none 和 visibility: hidden 在响应式里怎么选？
绝大多数响应式隐藏场景必须用 display: none。原因很实在：
-
display: none彻底移出文档流，后续元素自然上移，布局不会塌陷或错位 -
visibility: hidden保留原始尺寸，常导致父容器height: 100%失效、Flex 子项对齐异常、甚至点击穿透到下层元素 - 移动端导航菜单若用
visibility: hidden隐藏，展开时容易出现“闪一下再弹出”的错觉，其实是占位空间突然被撑开
唯一例外是需要过渡动画时：display 不可动画，得搭配 opacity + visibility + transition 手动控制。
为什么写了 @media 却没隐藏？先查这三件事
最常卡在这几步，不是代码写错，而是环境没配对：
- 缺
<meta name="viewport" content="width=device-width, initial-scale=1">—— 没它，移动端浏览器按桌面宽度（如 980px）渲染，@media (max-width: 480px)永远不触发 - 媒体查询写在了 CSS 文件末尾，但前面有更高权重的选择器（比如带
!important的行内样式），直接覆盖掉了 - 断点值和设计稿不一致：比如写了
max-width: 768px，但 iPad 竖屏是 768px，横屏是 1024px，结果竖屏没隐藏，横屏反而隐藏了——这时候该加and (orientation: portrait)
真正麻烦的不是语法，是断点是否覆盖了所有 viewport 变化场景，尤其是折叠屏横竖切换、iOS 动态字体缩放等边缘情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
