CSS 媒体类型

媒体类型（Media Type） 用来声明某段 CSS 是给哪类设备用的，例如屏幕（screen）、打印（print）。常与 @media 规则一起使用，并可结合媒体查询（如宽度、分辨率）做响应式布局。

在 link 上指定媒体类型

引入样式表时，可限制只在某种设备上加载：

<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

• screen：屏幕（显示器、平板、手机等），默认最常用。
• print：打印或打印预览时使用。
• all：所有设备（默认，可不写）。

其它还有 speech（语音合成）等，用得较少。

---

在 CSS 里用 @media

在同一个 CSS 文件中，用 @media 包住只在特定媒体类型下生效的样式：

/* 默认：屏幕 */
body { font-size: 16px; }

/* 仅打印时 */
@media print {
  body { font-size: 12pt; }
  .no-print { display: none; }
}

---

媒体查询（Media Queries）

媒体查询在媒体类型基础上增加条件（如视口宽度、横竖屏），实现响应式布局。语法：@media 媒体类型 and (条件)。

按视口宽度（最常用）

/* 视口宽度 ≤ 768px 时（常见「手机」断点） */
@media screen and (max-width: 768px) {
  .sidebar { display: none; }
  .main { width: 100%; }
}

/* 视口宽度 ≥ 1024px 时 */
@media screen and (min-width: 1024px) {
  .container { max-width: 1200px; }
}

横屏 / 竖屏

@media screen and (orientation: landscape) {
  /* 横屏 */
}

@media screen and (orientation: portrait) {
  /* 竖屏 */
}

组合条件

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 平板宽度 */
}

---

常见用法小结

• media="screen"：仅屏幕；media="print"：仅打印。
• @media print { }：打印样式（隐藏导航、调整字号等）。
• @media screen and (max-width: 768px) { }：小屏布局（移动端优先或断点布局）。

下一节学习 CSS 属性选择器。