如何使用media query实现CSS icons在移动端隐藏、桌面端显示

实现方法 #

首先给需要控制的目标图标添加自定义类名，方便CSS选中控制，示例如下：

<!-- 示例图标，添加自定义类 desktop-only -->
<i class="your-icon-class desktop-only"></i>

之后在CSS中添加媒体查询规则，常用的移动端断点为768px，你可以根据自身页面的布局需求调整阈值：

/* 默认桌面端状态：图标正常显示 */
.desktop-only {
  display: inline-block;
}

/* 视口宽度≤768px时（移动端场景）隐藏图标 */
@media only screen and (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

补充说明 #

• 如果你的图标原有display属性不是inline-block，保持和原有属性一致即可
• 若规则不生效，可在display: none后添加!important强制覆盖原有样式，不建议频繁使用，优先通过调整选择器优先级解决
• 如果需要适配更大的移动端/平板设备，可以将断点调整为max-width: 1024px

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