使用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; }}
这个例子中，仅在横屏时显示该元素，适合用于提示用户旋转设备的提示框。
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情
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 的切换机制，就能灵活控制元素在不同设备下的呈现。不复杂但容易忽略细节，比如断点值的选择和层叠顺序。建议结合浏览器开发者工具实时调试效果。
以上就是如何用css media query控制隐藏或显示元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030534.html
微信扫一扫 
支付宝扫一扫 
