最可靠方式是显式声明默认状态并配合媒体查询控制display显隐：先设默认display值，再用@media在断点内覆盖；避免混用display:none与visibility:hidden；表格列隐藏需通过语义化类名而非nth-child。
用 @media + display 控制显隐最可靠
直接写 display: none 不会响应屏幕变化，必须配合媒体查询。比如小屏隐藏侧边栏，得先默认显示，再在断点内覆盖：
-
.sidebar { display: block; }—— 默认显示（桌面端） -
@media (max-width: 768px) { .sidebar { display: none; } }—— 小于等于 768px 时隐藏 - 断点值建议用真实设备宽度：优先选
360px、414px、768px，别硬套过时的480px - 别把
md:hidden这类工具类直接往按钮上套——md:表示 ≥768px，对手机完全无效
display: none 和 visibility: hidden 别混用
两者“看起来都藏了”，但行为天差地别：
-
display: none：元素彻底退出渲染流，不占空间、不触发:hover、JS 监听不到事件、屏幕阅读器跳过 -
visibility: hidden：仍占位、仍影响布局、键盘 Tab 会聚焦到它——所以不能用来隐藏导航菜单 - 临时折叠面板可用
visibility: hidden；纯隐藏且不想被交互/读屏碰到，必须用display: none
移动端默认状态必须显式声明
很多人写完 @media (max-width: 414px) { .btn-print { display: none; } } 就以为完事了，结果小屏没生效——因为没设默认状态。
- 正确写法是：
.btn-print { display: none; }（小屏默认隐藏），再加@media (min-width: 415px) { .btn-print { display: block; } } - 或者更清晰：
.btn-print { display: none; }+@media (min-width: 415px) { .btn-print { display: inline-block; } } - 别指望浏览器自动推断“小屏该不该显示”，CSS 没这逻辑
表格列隐藏必须靠结构控制，不能只靠 nth-child
直接用 @media (max-width: 414px) { td:nth-child(3), th:nth-child(3) { display: none; } } 看似省事，但表格语义会被破坏，读屏软件可能错乱。
- 正确做法：给每列加
data-column="price"或类名如col-price - 然后用
@media (max-width: 414px) { .col-price { display: none; } } - 这样既保持语义完整，又方便 JS 动态控制列显隐
360px、414px、768px）挨个看，比猜强得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
