必须先设默认display值，否则@media中仅写block无效；因未定义状态优先级低于display:none，导致大屏仍隐藏。
直接在对应断点里把 display 从 none 改成 block（或你需要的值）就行，但必须先确保它有基础显示状态，否则会“该显不显”。
为什么写了 @media (min-width: 768px) { .section { display: block; } } 却没效果
常见错误是：元素默认就是 display: none，而你只在媒体查询里写了“显示”，却没给它设过初始状态。浏览器按 CSS 层叠规则，display: none 的优先级高于未定义——结果就是：小屏隐藏了，大屏也还是隐藏。
实操建议：
- 始终为该板块设一个默认
display值，比如.section { display: none; }（默认隐藏） - 再在目标断点里覆盖：
@media (min-width: 768px) { .section { display: block; } } - 别依赖 HTML 内联
style="display: none"—— 它会挡住媒体查询生效 - 用浏览器开发者工具检查 computed 样式，确认最终生效的是哪条规则
display: none 在不同断点间切换时的权重陷阱
当多个媒体查询都对同一个类设 display，CSS 权重决定谁赢。比如：
.sidebar { display: block; }
@media (max-width: 768px) { .sidebar { display: none; } }
@media (min-width: 1024px) { .sidebar { display: block; } }
这段代码在 1024px+ 会生效，但在 769–1023px 区间，.sidebar 实际是 display: block（来自第一条规则），不是你想的“仅在 ≥1024px 显示”。
更稳妥的做法：
- 统一用
min-width断点，避免区间空档 - 明确写出所有关键断点下的状态，例如：
@media (min-width: 768px) and (max-width: 1023px) - 把“仅大屏显示”的逻辑收口到一个类，如
.visible-desktop，并在全局 CSS 里定义它的默认display: none和断点覆盖
隐藏板块重新显示后，布局错乱怎么办
最常踩的坑是：该板块内部用了 position: absolute、float 或固定 width/height，导致它一显示就脱离文档流、压住其他内容，或者撑不开父容器。
检查点：
- 确认它父容器没设
overflow: hidden或height: 0类似限制（比如height: 00vh这种写法会直接让高度归零） - 如果用了 Flexbox，确保父容器的
flex-direction和flex-wrap能容纳新增元素 - 移动端显示后，测试是否触发了意外的横向滚动（常见于表格、宽卡片没加
max-width: 100%） - 若含图片或 iframe，记得加
img, iframe { max-width: 100%; height: auto; }
真正麻烦的不是“怎么让它显示”，而是它显示之后，是否还守规矩——DOM 在，样式未必跟得上。每次加回一个隐藏区块，都得把它当新组件一样验一遍渲染、焦点、触控和语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
