CSS 媒体类型

媒体类型（Media Types）告诉浏览器"这份样式是给谁看的"：屏幕（screen）、打印机（print）、朗读设备（speech）等各有各的渲染特点。用对媒体类型，同一份页面在屏幕与打印纸上都能得体呈现。

什么是媒体类型

CSS 定义了多种媒体类型，常用的是下面四种：

值	含义
all	所有媒体设备（默认）
screen	彩色电脑屏幕、手机屏幕等
print	打印预览与打印纸张
speech	语音合成器（读屏软件）

/* 只对屏幕生效 */
@media screen {
  body { background: #fff; }
}

用 @media 区分屏幕与打印

在样式表内部用 @media 包住某类媒体专属的规则：

/* 屏幕：彩色页面，导航可见 */
nav { display: block; }

/* 打印：去掉背景色，隐藏导航 */
@media print {
  body { background: #fff; color: #000; }
  nav { display: none; }            /* 打印时不输出导航 */
  a { color: #000; text-decoration: underline; }
}

运行效果：浏览器里是正常彩色页面；按 Ctrl+P 打印时，导航被隐藏、背景变白，正文更省墨易读。

用 media 属性引入专用样式表

也可以给 link 标签指定 media 属性，浏览器只在匹配的设备上加载该样式：

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

/* print.css 内容示例 */
h1 { font-size: 20pt; }   /* 打印用 pt 字号更精确 */
@page { margin: 2cm; }    /* 设置页边距 */

运行效果：屏幕上加载 screen.css，点打印时浏览器改用 print.css，屏幕样式和打印样式彻底分开维护。

打印样式的常见套路

给网页做"打印友好版"，通常处理这几件事：

@media print {
  header, footer, aside { display: none; }            /* 隐藏广告与导航 */
  article { width: 100%; }                            /* 正文占满纸张 */
  a[href]::after { content: " (" attr(href) ")"; }    /* 链接后显示网址 */
}

运行效果：打印纸上只剩正文，每个链接后面自动带出括号里的真实地址，方便读者抄录或核对。

媒体类型与现代媒体查询

如今更重要的是"媒体查询"：在 @media 后加条件（如 max-width），让同一份 CSS 适配不同屏幕宽度。媒体类型是它的基础：

@media print { ... }                       /* 仅按设备类型 */
@media screen and (max-width: 600px) {     /* 类型 + 宽度条件 */
  body { font-size: 14px; }
}

运行效果：屏幕宽度小于 600 像素时字号自动变小。关于媒体查询的完整用法，后面的章节会系统展开。

小结

媒体类型把样式按"输出设备"分类：print 打印、screen 屏幕、speech 朗读。用 @media 内联或 link media 外链，都能让页面在屏幕与纸张上各得其所；它也是现代响应式"媒体查询"的语法根基。