通过css媒体查询与选择器结合可实现响应式隐藏元素，如使用类名.hidden-sm在屏幕宽度≤768px时设置display: none，或利用属性选择器[data-hide-on-small]在576px以下隐藏内容，还可通过结构伪类如:last-child在移动端隐藏特定子元素，建议优先用display: none并配合aria-hidden提升可访问性，保持类名一致以增强维护性。
响应式设计中，隐藏元素常用于在不同设备上优化布局。通过结合CSS 媒体查询（@media） 与 CSS选择器，可以灵活控制元素在特定屏幕尺寸下的显示状态。
使用媒体查询配合类选择器隐藏元素
最常见的方法是为需要隐藏的元素添加一个通用类名，然后在媒体查询中根据屏幕宽度设置 display: none。
例如：
.hidden-sm { display: block; }
@media (max-width: 768px) {
.hidden-sm { display: none; }
}
HTML中使用：
<div class="hidden-sm">在小屏幕上隐藏</div>
这样，在屏幕宽度小于等于768px时，该元素将被隐藏。
结合属性选择器实现更灵活控制
你也可以利用属性选择器，比如通过自定义数据属性来控制响应式行为。
例如，定义一个属性 data-hide-on-small：
[data-hide-on-small] {
display: block;
}
@media (max-width: 576px) {
[data-hide-on-small] {
display: none;
}
}
HTML中：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<p data-hide-on-small>小屏幕不显示这段文字</p>
这种方法语义清晰，便于维护。
使用伪类与媒体查询组合（进阶技巧）
虽然不能直接在媒体查询中使用伪类来“隐藏”元素，但可以结合结构选择器动态控制。
比如，你想在移动端隐藏某个列表中的最后一项：
@media (max-width: 480px) {
.list-item:last-child {
display: none;
}
}
适用于适配移动菜单、隐藏多余按钮等场景。
实用建议与注意事项
隐藏元素时，注意以下几点以提升用户体验和可访问性：
- 优先使用 display: none 彻底隐藏并脱离文档流
- 避免使用 visibility: hidden 或 opacity: 0，除非需要保留空间或动画效果
- 考虑屏幕阅读器体验，必要时添加 aria-hidden="true"
- 命名类时保持一致性，如 .hide-mobile、.show-desktop 等
基本上就这些。合理组合媒体查询和选择器，能让响应式隐藏更简洁高效。关键是根据项目结构选择合适的方法，保持代码可读性和可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
