CSS 媒体类型

CSS 媒体查询

适应不同情境的样式

CSS 允许你针对不同的媒体类型或设备特性应用不同的样式。这一功能是响应式网页设计（Responsive Web Design, RWD）的基础，它使网站能够根据各种屏幕尺寸、分辨率和设备功能调整其布局和外观。

虽然某些 CSS 属性可能本身就与特定情境相关（例如用于打印样式的属性），但许多属性，如 font-size、margin 或 display，可以通过媒体查询根据上下文进行调整。

例如，对于屏幕浏览，较大的字体尺寸可能更合适，而对于打印文档，较小的尺寸效果更好。类似地，布局在宽大的桌面屏幕和窄小的移动屏幕之间可能会发生很大变化。

@media 规则

@media 规则用于根据媒体查询的结果，有条件地应用一组 CSS 规则。

媒体查询包含一个可选的媒体类型（如 screen 或 print）和/或一个或多个媒体特性（如 min-width、max-width、orientation）。

示例：针对屏幕和打印媒体类型应用不同样式：

/* Default styles (apply everywhere unless overridden) */
p {
  font-family: sans-serif;
  font-size: 1rem; /* 假设浏览器默认设置下为 16px */
  line-height: 1.5;
}

/* Styles specific to screen output */
@media screen {
  p {
    color: #333;
  }
}

/* Styles specific to print output */
@media print {
  p {
    font-family: serif;
    font-size: 11pt;
    color: #000;
  }
  /* Hide navigation elements when printing */
  nav, footer {
    display: none;
  }
}

此示例设置了默认的段落样式，然后使用 @media print 在打印页面时覆盖字体设置并隐藏导航/页脚元素。

用于响应式设计的媒体特性

虽然像 print 这样的媒体类型很有用，但媒体特性在今天更常用，尤其是在创建适应不同屏幕尺寸的响应式布局时。

示例：根据屏幕宽度调整布局：

.container {
  width: 90%;
  margin: 0 auto;
}

.sidebar {
  width: 100%; /* 小屏幕下全宽 */
  margin-bottom: 1em;
}

.main-content {
  width: 100%;
}

/* Apply styles when screen width is 768px or wider */
@media screen and (min-width: 768px) {
  .container {
    display: flex; /* 使用 Flexbox 布局 */
    gap: 1.5em;
    width: 80%;
  }
  .sidebar {
    width: 30%; /* 侧边栏占 30% 宽度 */
    margin-bottom: 0;
  }
  .main-content {
    width: 70%; /* 主内容占 70% 宽度 */
  }
}

在此示例中，布局从小屏幕（< 768px）上的单列布局切换到更大屏幕（>= 768px）上使用 Flexbox 的双列布局。常见的特性包括 min-width、max-width、orientation、prefers-reduced-motion 和 resolution。

提示：通常推荐使用 min-width 查询（移动优先方法），即为小屏幕定义基础样式，然后逐步为更大屏幕添加复杂性。

常见的媒体类型

虽然媒体特性在 RWD 中占据主导地位，但一些媒体类型仍然相关：

媒体类型	描述
all	适用于所有设备。如果未指定类型，则这是默认值。
print	适用于在打印预览模式下查看或打印到纸张的文档。
screen	主要适用于可视屏幕（计算机、平板电脑、智能手机）。
speech	用于语音合成器（以前是 aural）。支持有限，且辅助功能通常更多依赖 ARIA 属性和语义化 HTML。

注意：许多较旧的媒体类型，如 handheld、projection、tv、braille、embossed、tty，已被废弃或在现代 Web 开发中支持有限/不一致且使用较少。使用媒体特性的响应式设计技术已在很大程度上取代了对 handheld 或 tv 等类型的需求。