CSS媒体查询控制元素显示隐藏技巧

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS媒体查询控制元素显示隐藏方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

使用CSS Media Query可通过屏幕尺寸、方向等条件控制元素显示隐藏。1. 按宽度：max-width下隐藏logo显示菜单按钮；2. 按方向：横屏时显示only-landscape元素；3. 按分辨率或打印环境：print时隐藏no-print内容，高像素比设备加载高清图；4. 用辅助类如hidden-sm-down/up实现小屏或大屏隐藏，便于复用。关键在于掌握断点设置与display切换，结合开发者工具调试确保响应效果。

使用 CSS Media Query 可以根据设备的屏幕尺寸、分辨率、方向等条件来控制元素的显示或隐藏，这在响应式设计中非常常见。核心思路是结合 @media 规则与 display 属性（或其他如 visibility）来动态调整元素的可见性。

1. 基本语法：通过屏幕宽度控制显示隐藏

最常见的用法是根据视口宽度决定是否显示某个元素。

例如，在小屏幕上隐藏大屏专用元素，或在大屏上隐藏移动端菜单按钮：

.header-logo {
  display: block;
}

.menu-toggle-btn {
  display: none;
}

@media (max-width: 768px) {
  .header-logo {
    display: none;
  }
  .menu-toggle-btn {
    display: block;
  }
}

上面代码表示：当屏幕宽度小于等于 768px 时，隐藏 logo，显示菜单按钮。

2. 针对不同设备方向的控制

可以利用设备的方向（横屏或竖屏）来切换元素的显示状态。

.only-landscape {
  display: none;
}

@media (orientation: landscape) {
  .only-landscape {
    display: block;
  }
}

这个例子中，仅在横屏时显示该元素，适合用于提示用户旋转设备的提示框。

3. 结合分辨率或设备类型进行控制

也可以根据设备像素比（Retina 屏幕）或打印环境做适配。

比如只在打印时隐藏某些元素：

.no-print {
  display: block;
}

@media print {
  .no-print {
    display: none;
  }
}

或者为高清屏加载高分辨率图片（配合背景图使用）：

.icon {
  background-image: url(icon.png);
}

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .icon {
    background-image: url(icon@2x.png);
    background-size: 20px 20px;
  }
}

4. 使用辅助类简化控制

实际项目中，常定义一些通用的响应式辅助类，方便复用。

.hidden-sm-down {
  display: block;
}

.hidden-sm-up {
  display: block;
}

@media (max-width: 575.98px) {
  .hidden-sm-down {
    display: none;
  }
}

@media (min-width: 576px) {
  .hidden-sm-up {
    display: none;
  }
}

这样可以在 HTML 中直接使用：

<div class="hidden-sm-up">只在小屏显示</div>

基本上就这些常用方式。关键是理解 @media 的条件判断逻辑和 display 的切换机制，就能灵活控制元素在不同设备下的呈现。不复杂但容易忽略细节，比如断点值的选择和层叠顺序。建议结合浏览器开发者工具实时调试效果。

以上就是《CSS媒体查询控制元素显示隐藏技巧》的详细内容，更多关于断点,响应式设计,显示隐藏,@media,CSSMediaQuery的资料请关注golang学习网公众号！