第五章 · 5.2 节

常用媒体特性

宽度只是媒体查询众多能力中的一种。现代 CSS 还能感知屏幕方向、用户的深色模式偏好、是否希望减少动效、输入设备类型，甚至是否处于打印场景——这些"环境感知"能力，是做出真正体贴用户的界面的关键。

orientation：屏幕方向

@media (orientation: landscape) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (orientation: portrait) {
  .gallery { grid-template-columns: 1fr; }
}

prefers-color-scheme：深浅色模式

本教程站点自身的深色模式就是通过它实现的——检测操作系统 / 浏览器层面的主题偏好，配合 CSS 自定义属性可以做到"零 JavaScript 切换主题"。

:root {
  --ink: #26233a;
  --paper: #f4f5f0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9e6f2;
    --paper: #232230;
  }
}

prefers-reduced-motion：减弱动效

部分用户（前庭功能敏感人群）会在系统设置中开启"减弱动态效果"，尊重这一偏好是无障碍设计的基本要求。

.card { transition: transform .3s; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

hover / pointer：输入方式检测

触屏设备没有真正意义上的"悬停"，用 hover 与 pointer 特性可以区分精确指点设备（鼠标）与粗略指点设备（手指）。

/* 只在支持悬停且指点精确的设备上启用悬浮效果 */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

print 媒体类型

媒体类型（media type）而非特性，用来区分输出介质。常见做法是打印时隐藏导航与交互控件，只保留正文内容。

@media print {
  nav, .no-print { display: none; }
  body { color: #000; }
}

速查表