响应式设计中如何用合适的display类型替代display:none？

这是个很常见的响应式布局痛点——不用逐个重写所有display类，我们有几种优雅的纯CSS解决方案，优先级从高到低推荐：

方案1：反转显示逻辑（最简洁，优先推荐） #

你之前的写法有点绕，其实可以默认让所有元素都显示（应用它们的display类），只在对应的断点隐藏不需要的元素，完全不需要手动“恢复”display属性：

/* 基础display类：默认应用正确的display值 */
.inlineBlock {
  display: inline-block;
}
.flex {
  display: flex;
}

/* 移动端（≤768px）：仅隐藏桌面端专属元素 */
@media all and (max-width: 768px) {
  .desktopOnly {
    display: none;
  }
}

/* 桌面端（≥769px）：仅隐藏移动端专属元素（用769避免768px时的规则重叠） */
@media all and (min-width: 769px) {
  .mobileOnly {
    display: none;
  }
}

为什么这个方案有效？ #

• 默认状态下，.inlineBlock/.flex已经给元素设置了正确的display值，.mobileOnly和.desktopOnly元素都是显示的。
• 我们只需要在对应断点隐藏不需要的元素，不需要修改保留元素的display属性——它本来就是正确的，自然不用“恢复”。

这是最省心的方案，几乎没有冗余代码，也不需要考虑各种display类型的兼容问题。

方案2：用CSS变量存储原始display值（适合默认隐藏、断点显示的场景） #

如果你的需求是默认隐藏某些元素，只在特定断点显示（比如某些移动端元素默认不显示，到小屏才出来），那可以用CSS自定义属性（变量）来存储每个元素的原始display值，这样在媒体查询里一键恢复：

/* 基础display类：同时存储原始display值到变量 */
.inlineBlock {
  --original-display: inline-block;
  display: var(--original-display);
}
.flex {
  --original-display: flex;
  display: var(--original-display);
}

/* 默认状态：隐藏移动端和桌面端专属元素（如果需要的话） */
.mobileOnly, .desktopOnly {
  display: none;
}

/* 移动端（≤768px）：显示mobileOnly，隐藏desktopOnly */
@media all and (max-width: 768px) {
  .desktopOnly {
    display: none;
  }
  .mobileOnly {
    /* 用变量恢复原始display值 */
    display: var(--original-display);
  }
}

/* 桌面端（≥769px）：显示desktopOnly，隐藏mobileOnly */
@media all and (min-width: 769px) {
  .mobileOnly {
    display: none;
  }
  .desktopOnly {
    display: var(--original-display);
  }
}

优势： #

• 不管元素的原始display是inline-block、flex还是其他类型，都不用逐个重写，变量会自动帮你恢复。
• 纯CSS实现，不需要依赖JS，兼容性也很好（支持IE11及以上现代浏览器）。

方案3：JS辅助（仅作为CSS方案的补充） #

如果你的场景非常特殊（比如动态生成的元素，或者需要兼容极老浏览器），可以用JS获取元素的原始display值，存储到data-*属性中，然后在媒体查询变化时恢复：

// 页面加载时保存所有元素的原始display值
document.querySelectorAll('.inlineBlock, .flex').forEach(el => {
  el.dataset.originalDisplay = window.getComputedStyle(el).display;
});

// 监听窗口 resize，根据断点恢复display
function handleResponsive() {
  const isMobile = window.innerWidth <= 768;
  document.querySelectorAll('.mobileOnly').forEach(el => {
    el.style.display = isMobile ? el.dataset.originalDisplay : 'none';
  });
  document.querySelectorAll('.desktopOnly').forEach(el => {
    el.style.display = isMobile ? 'none' : el.dataset.originalDisplay;
  });
}

// 初始化+监听 resize
handleResponsive();
window.addEventListener('resize', handleResponsive);

不过这个方案需要额外的JS代码，不如前两种纯CSS方案优雅，只推荐在CSS方案无法满足的极端场景下使用。

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