在css中如何用media query控制元素显示隐藏

在css中，media query可以根据设备特性比如视口宽度来应用不同的样式规则，从而控制元素显示或隐藏。这是实现响应式布局的基础手段之一。

什么是media query

media query是css3提供的功能，允许我们针对不同的媒体类型和条件编写样式。最常见的用法是根据视口宽度设置断点，当条件满足时，里面的样式才会生效。

用display控制显示隐藏

最简单直接的方式是把元素的display设为none来隐藏，或者恢复成block、inline等正常值来显示。下面的例子在宽度小于768像素时隐藏侧边栏：

/* 默认侧边栏显示 */
.sidebar {
  display: block;
}

/* 视口宽度不超过768px时隐藏 */
@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

使用visibility与opacity

如果希望元素隐藏但保留占位空间，可以用visibility:hidden，或者用opacity:0配合pointer-events:none。它们不会像display:none那样把元素从布局中完全移除。

@media screen and (max-width: 480px) {
  .tip {
    visibility: hidden;
  }
}

常见断点参考

实际项目中可参考以下常见断点，但最好结合自己设计稿来定：

注意事项

• media query条件写错会导致样式不生效，注意min-width和max-width的区别。
• 不要滥用display:none，隐藏关键内容可能影响无障碍访问和seo。
• 多个media query块之间后写的同权重规则会覆盖前面的。

结合类切换的思路

有时我们用js检测宽度后给body加类，再用css控制。但纯css的media query已经能覆盖大多数显示隐藏场景，例如：

<style>
  .ad {
    display: none;
  }
  @media screen and (min-width: 1024px) {
    .ad {
      display: block;
    }
  }
</style>
<div class="ad">大屏才看的广告</div>

通过上述方式，就能用css的media query平稳地控制元素在不同屏幕下的显示与隐藏。

cssmedia_queryresponsive_designdisplay_propertyelement_visibility修改时间：2026-07-25 00:12:18