直接用@media (prefers-reduced-motion: reduce)包裹降级规则；该特性值为reduce或no-preference，非布尔；需禁用自动轮播、悬停过渡、页面切换动效，统一设animation/transition: none，保留反馈可用opacity 0.1s；js用window.matchmedia监听并添加reduced-motion类；各平台系统设置路径不同，须真机测试。
prefers-reduced-motion媒体查询怎么写
直接用 @media (prefers-reduced-motion: reduce) 包裹需要降级的动画规则即可。它不是布尔开关，而是有明确取值的媒体特性：默认是 no-preference，用户开启系统“减少动画”后才为 reduce。别写成 (prefers-reduced-motion: true) 或漏掉引号——这会直接失效。
哪些CSS动画该被禁用或替换
重点处理三类高干扰行为：自动播放的轮播、悬停触发的复杂过渡、全局页面切换动效。对这些，推荐统一设为 animation: none 或 transition: none；若需保留基础反馈（比如按钮按压），可用极简的 transition: opacity 0.1s 替代多属性缓动。
- 避免只关
animation却漏掉transition，两者都得覆盖 - 慎用
opacity完全归零的动画——即使时间很短，也可能被识别为闪烁，改用visibility: hidden+height: 0更稳妥 - 第三方组件（如 React 的
framer-motion）需单独配置，不能依赖 CSS 媒体查询
JavaScript里怎么响应这个偏好变化
用 window.matchMedia 监听，比在 JS 里反复查 getComputedStyle 高效且准确：
const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
function handleMotionChange(e) {
if (e.matches) {
document.body.classList.add('reduced-motion');
} else {
document.body.classList.remove('reduced-motion');
}
}
motionQuery.addEventListener('change', handleMotionChange);
handleMotionChange(motionQuery); // 初始化
注意：不要在每次渲染时调用 matchMedia，监听一次足矣；Safari 旧版本需用 addListener 兼容，但 iOS 14+ 和 macOS Monterey 后已统一支持 addEventListener。
测试时容易忽略的系统设置路径
不同平台入口差异大，仅靠浏览器 DevTools 模拟不够可靠：
- macOS：系统设置 → 辅助功能 → 显示 → 降低动态效果（必须打开，仅开“减弱透明度”无效）
- Windows：设置 → 辅助功能 → 视觉效果 → 在 Windows 中显示动画（关掉）
- iOS：设置 → 辅助功能 → 动作 → 减少动态效果（开启）
- Android：设置 → 辅助功能 → 移动/动画 → 关闭所有动画（部分厂商叫“窗口动画缩放”）
真实设备上测试比模拟器重要——某些 Android 厂商定制系统会忽略该查询，或者只在 WebView 中生效，而 Chrome for Android 则基本可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
