如何通过媒体查询隐藏父div但保留子元素可视化（仅CSS实现）

核心思路 #

要实现中间父元素在媒体查询触发时“消失”但子元素正常显示，最直接的方法是利用CSS的display: contents属性——该属性会让元素本身不生成任何盒模型，子元素直接继承其父容器的布局上下文，相当于中间父元素不存在，同时完全不影响子元素的渲染。

步骤实现 #

首先给DOM结构添加类名，方便精准选中元素：

<div class="outer">                    <!-- 保留这个外层div -->
  <div class="middle">                 <!-- 媒体查询触发时隐藏该父div -->
    <div class="inner">                <!-- 保留这个子div -->
      <!-- 子元素内容 -->
    </div>
  </div>
</div>

然后编写CSS，在媒体查询中对中间父元素应用display: contents：

/* 可选：默认状态下的基础样式 */
.outer {
  padding: 20px;
  border: 1px solid #ccc;
}
.middle {
  padding: 15px;
  background-color: #eee;
}
.inner {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* 媒体查询触发条件（示例为屏幕宽度≤768px时生效） */
@media (max-width: 768px) {
  .middle {
    display: contents;
  }
}

备选兼容方案 #

如果需要兼容较旧浏览器（display: contents在现代浏览器已广泛支持），可以通过以下方式实现：

@media (max-width: 768px) {
  .middle {
    /* 让父元素尺寸归零且不占空间 */
    width: 0;
    height: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    /* 禁用父元素的交互 */
    pointer-events: none;
  }
  .inner {
    /* 让子元素脱离父元素的溢出限制，回到正常布局流 */
    position: relative;
    width: auto;
    height: auto;
    pointer-events: auto;
  }
}

内容的提问来源于stack exchange，提问作者user21728832