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