CSS - 图标隐藏在移动设备上，但不在网络上答案

【问题标题】：CSS -icons hidden on mobile but not on webCSS - 图标隐藏在移动设备上，但不在网络上
【发布时间】：2021-09-03 03:33:23
【问题描述】：

我希望图标仅在使用媒体查询将窗口大小设置为移动大小时隐藏和显示在网络上。它有什么用处

【问题讨论】：

您需要阅读文档https://www.w3schools.com/css/css_rwd_mediaqueries.asp
您如何定义移动窗口大小（即您是指移动窗口还是指视口大小小于宽度或高度）？一旦您知道了，请查看有关媒体查询的 MDN 文档。例如：developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
请不要破坏您的帖子。通过在 Stack Exchange 网络上发布，您已授予 SE 分发该内容的不可撤销的权利（在 CC BY-SA 4.0 license 下）。根据 SE 政策，任何破坏行为都将被撤销。

【解决方案1】：

这些是 boostrap 5 个媒体查询断点


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

所以你可以像下面这样添加

@media (min-width: 576px) {
#icon_id {
  display:none;
}
}

【讨论】：

【解决方案2】：

您可以在相应的媒体查询中使用display:none，

【讨论】：