第五章 · 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;
  }
}

实践建议始终把颜色定义在自定义属性（token）上，组件样式只引用 token，而不是把媒体查询散落地嵌入每一处颜色声明——这能让深色模式的维护成本降到最低。

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; }
}

速查表

特性	取值示例	用途
width	768px	视口宽度
orientation	portrait / landscape	屏幕方向
prefers-color-scheme	light / dark	深浅色偏好
prefers-reduced-motion	reduce / no-preference	动效偏好
hover	hover / none	是否支持悬停
pointer	fine / coarse / none	指点精度
print	（媒体类型）	打印场景

Chapter 5 · Section 5.2

Common Media Features

Width is only one of the many abilities of media queries. Modern CSS can also sense screen orientation, the user's dark-mode preference, whether they want reduced motion, the type of input device, and even whether the page is being printed — these "environment-sensing" abilities are key to building interfaces that truly care about the user.

orientation: Screen Orientation

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

prefers-color-scheme: Light and Dark Mode

This tutorial site's own dark mode is implemented with it — detecting the theme preference at the operating system / browser level, and combined with CSS custom properties, it achieves "theme switching with zero JavaScript".

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

Practice tipAlways define colors on custom properties (tokens) and have component styles reference only the tokens, rather than scattering media queries into every color declaration — this keeps the maintenance cost of dark mode to a minimum.

prefers-reduced-motion: Reducing Motion

Some users (people sensitive to vestibular disorders) enable "reduce motion" in their system settings; respecting this preference is a basic requirement of accessible design.

.card { transition: transform .3s; }

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

hover / pointer: Detecting Input Methods

Touch screens have no true "hover"; the hover and pointer features distinguish precise pointing devices (mouse) from coarse ones (finger).

/* enable the hover effect only on devices that support hover with precise pointing */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

The print Media Type

A media type rather than a feature, used to distinguish output media. A common practice is hiding navigation and interactive controls when printing, keeping only the main content.

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

Quick Reference

Feature	Example values	Purpose
width	768px	Viewport width
orientation	portrait / landscape	Screen orientation
prefers-color-scheme	light / dark	Color scheme preference
prefers-reduced-motion	reduce / no-preference	Motion preference
hover	hover / none	Whether hover is supported
pointer	fine / coarse / none	Pointer precision
print	(media type)	Print scenarios