CSS基础教程（三十七）媒体类型：CSS媒体类型，让你的网站在任何设备上都能“装”得恰到好处！-优快云博客

一、引言：为什么你的网站需要“见机行事”？

在互联网的“上古时代”，网站设计基本上只考虑一种情况：在电脑显示器上查看。那时的网页设计师只需要盯着15寸的CRT大脑袋显示器，就能搞定一切。

但今天呢？情况彻底变了！

你的用户可能正在用27寸的4K超清显示器浏览你的产品页，可能正捧着手机在地铁上刷你的博客，可能正在用平板电脑展示你的方案，甚至可能把重要的内容打印出来慢慢看。

试想一下：如果你那精心设计的网页，在打印时连背景色和导航栏都一起打了出来，不仅浪费墨水，还根本没法看！或者，你为大屏幕设计的华丽布局，在手机小屏幕上挤成一团，用户需要像用显微镜一样放大再放大才能点击链接……

这简直是一场用户体验的灾难！

为了避免这种“社死”现场，我们的CSS需要一种超能力——“见机行事”。而赋予CSS这种超能力的，正是我们今天的男主角：CSS媒体类型（Media Types） 和它的超级进化形态——媒体查询（Media Queries）。

本文将带你深入CSS媒体类型的魔法世界，让你成为网页布局的“场景大师”！

二、媒体类型是什么？—— CSS的“场景感知”器

简单来说，CSS媒体类型是一种允许你为不同的设备类型或特定环境应用不同CSS样式的机制。你可以把它想象成一套“情景模式”：开会模式、睡眠模式、游戏模式……你的网站也可以有“屏幕模式”、“打印模式”、“演讲模式”。

最原始的CSS2标准中定义了10种媒体类型，但随着技术发展，一些已被淘汰，最常用和实用的有以下几种：

all：全能王。适用于所有设备。如果你不指定任何媒体类型，默认就是它。
screen：屏幕霸主。这是我们最熟悉的伙伴，专门针对彩色电脑屏幕、平板、智能手机等设备。
print：打印专家。专门针对打印机或打印预览模式。隐藏不必要的元素、调整字体颜色为黑色、链接显示URL等，全靠它。
speech：语音助手。针对屏幕阅读器等语音合成设备。可以控制语音的朗读方式、停顿等。（目前支持度有限，但未来可期）

还有一些不那么常见的，比如 braille（盲文设备）、embossed（盲文打印机）、projection（投影仪）等，了解即可。

三、如何使用媒体类型？—— 召唤魔法的咒语

你有两种方式来“吟唱”媒体类型的咒语。

方法一：<link> 标签法（外链式）

在HTML的<head>区域，为不同的媒体类型引入不同的CSS文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的响应式网站</title>
    <!-- 给所有设备 -->
    <link rel="stylesheet" href="style.css" media="all">
    <!-- 专门给屏幕 -