如何通过CSS/HTML媒体查询实现移动端动画的添加或移除控制

完全可以通过原生媒体查询实现分设备控制动画的需求，不需要额外编写复杂的设备检测逻辑，只需要把动画相关的样式根据设备类型做适配即可。

媒体查询支持根据设备的屏幕尺寸、输入类型（触屏/精确指针）匹配对应样式，你只需要把原来全局生效的动画样式，拆分到不同的媒体查询规则块中，就能覆盖两类常见需求：

• 仅移动端加载动画、桌面端直接静态显示元素
• 桌面端保留原有动画、移动端跳过过渡效果直接显示元素
  整个过程不需要修改你已有的JS业务逻辑，改动量集中在CSS部分。

以你提到的「仅在移动端启用Discord弹窗的滑入动画，桌面端不播放动画」为例，具体改动步骤如下：

第一步：调整全局弹窗的默认样式 #

把原来写在全局.discord-shoutout选择器里的动画相关规则移除，给桌面端默认设置为无动画的静态可见状态，原有的定位、宽度、阴影、内容布局等样式全部保留不动：

.discord-shoutout {
  /* 原有布局相关样式全部保留：定位、宽度、层级、阴影等 */
  position: fixed;
  bottom: 2em;
  right: 1em;
  width: 300px;
  z-index: 100;
  text-align: left;
  filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));

  /* 桌面端默认状态：关闭过渡，元素直接可见 */
  transition: none;
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

第二步：把动画规则迁移到移动端媒体查询内 #

在CSS文件末尾新增针对移动端的媒体查询，把原来的过渡效果、隐藏/显示的动画逻辑全部放到这个规则块里，保持和你原有类触发的逻辑完全一致：

/* 通用移动端判定：屏幕宽度≤768px，为行业通用的移动端断点 */
@media (max-width: 768px) {
  .discord-shoutout {
    /* 移动端恢复原有动画效果 */
    transition: 1s ease;
    visibility: hidden;
    opacity: 0;
    transform: translate(1em, 50px);
  }
  /* 类触发显示时，和原有逻辑保持一致 */
  .discord-shoutout.online {
    opacity: 1;
    transform: translate(0, 0);
    visibility: visible;
  }

  /* 移动端无鼠标悬停交互，固定阴影效果避免点击闪烁 */
  .discord-shoutout:hover {
    filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));
  }
}

如果你需要的是反过来的逻辑：桌面端保留原有动画，移动端移除动画，改动会更简单——全局默认保留你原来的全部动画样式，只需要在移动端的媒体查询里加一行覆盖规则即可，不需要拆分布局样式：

@media (max-width: 768px) {
  .discord-shoutout {
    /* 关闭过渡效果，类切换时元素瞬间显示，无动画过程 */
    transition: none;
  }
}

如果需要更精准的区分移动端，避免把带触屏功能的二合一笔记本误判为移动端，可以用CSS原生的指针类型检测条件，替换单纯的宽度判定：

/* 精准匹配触屏输入的设备，搭配常见的移动设备宽度范围 */
@media (pointer: coarse) and (max-width: 1024px) {
  /* 移动端专属动画规则 */
}

这种判定方式比通过JS检测设备UA的可靠性更高，不会因为新设备型号出现就失效，也不会阻塞页面首屏渲染。

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