📱
CSS 媒体特性
@media 常用媒体特性速查。
本地处理 · 不上传
加载工具中…
相关：css · media · 响应式 · 断点 · 暗色
CSS 媒体特性列出媒体查询中可用的特性，涵盖宽高、方向、指针类型、配色偏好与减少动效等。响应式与无障碍适配都靠它们。
使用步骤
- 先确定要按宽度、指针类型还是配色偏好来适配
- 找到对应的媒体特性名
- 注意范围语法与 min-/max- 前缀两种写法
- 改完拖动窗口或切换系统主题逐个断点验证
使用场景
- 编写响应式媒体查询
- 适配深色模式
- 照顾减少动效的偏好
- 按输入设备类型调整交互
小贴士
- prefers-color-scheme 用于深色模式适配，prefers-reduced-motion 用于关闭非必要动画，这两项是现代站点应当支持的基本适配。
- pointer 与 hover 特性能判断设备的输入方式，比用屏幕宽度猜测是不是手机可靠得多。
- 尊重减少动效偏好不是可选项——大幅动效会让前庭功能敏感的用户产生眩晕与恶心。
常见问题
怎么支持深色模式？
用 `@media (prefers-color-scheme: dark)` 包裹深色下的样式覆盖。更好的做法是把颜色定义成 CSS 变量，在这个媒体查询中只重定义变量值，改动量最小。
怎么判断是不是触屏设备？
用 `@media (hover: none) and (pointer: coarse)` 判断，比按屏幕宽度猜测准确得多——大屏触控设备和小窗口的桌面浏览器都会被宽度判断误伤。
prefers-reduced-motion 一定要支持吗？
应当支持。这是用户在系统中明确表达的健康需求，大幅动效会让前庭功能敏感者产生眩晕。在该查询中把动画时长设为极短或关闭即可，成本很低。
CSS 媒体特性是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 媒体特性，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。