17370845950

使用@media查询结合display属性可实现响应式显示控制，如.sidebar在屏幕≤768px时隐藏；.desktop-only可在≥1024px时显示；还可根据布局需求切换flex、grid等值，确保元素在不同设备下合理呈现，且应避免使用visibility或opacity以保留空间。

在 CSS 中，可以通过 @media 查询结合 display 属性来控制元素在不同屏幕尺寸下的显示与隐藏。这种方式常用于响应式设计，比如在移动端隐藏某些元素，或在桌面端显示更多内容。

使用 display 控制显示隐藏

最常见的方法是通过 display: none 隐藏元素，而正常状态下使用 display: block、display: flex 等使其显示。

.sidebar {
  display: block; /* 默认显示 */
}
@media (max-width: 768px) {
.sidebar {
display: none; / 屏幕宽度小于等于 768px 时隐藏 /
}
}

反向控制：仅在特定条件下显示

有时希望某个元素只在特定设备（如桌面）显示，移动端则隐藏。可以先隐藏，再在 media query 中显示。

.desktop-only {
  display: none;
}
@media (min-width: 1024px) {
.desktop-only {
display: block; / 仅在宽屏显示 /
}
}

配合其他 display 值使用

除了 block 和 none，也可以根据布局需要使用 flex、grid 等。

.nav-items {
  display: flex;
}
@media (max-width: 576px) {
.nav-items {
display: none;
}
}

基本上就这些。关键是利用 display 在不同媒体条件下的切换，实现响应式的显示与隐藏。注意不要使用 visibility 或 opacity，它们虽然“看不见”，但依然占空间，不如 display: none 彻底隐藏。