媒体查询 ( @media )
如果要在不同分辨率的屏幕上浏览同一个网页，常常会透过 CSS 的方式制作 RWD 响应式网页，而 CSS 的 @media 媒体查询可以定义判断不同媒体的条件，只要符合条件，就会替这种媒体套用对应的 CSS 样式属性，这篇教学会介绍 CSS @media 媒体查询 ( Media Queries ) 的相关用法。
快速导览：
教学影片
搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。
认识与使用 @media
由于 CSS 基本上是按照权重大小进行“覆盖并套用”样式，不容易进行逻辑判断套用样式，但如果透过 CSS 的 @media 媒体查询 ( Media Queries )，就能透过“逻辑判断”的方式，根据装置的媒体类型（ 例如屏幕或打印 ）或其他特性（ 例如屏幕分辨率、方向、宽高比等 )，套用不同的样式，如果判断条件符合为 true 就会套用样式，反之为 false 就不会套用样式。
@media 共有下列三种使用方式：
在 HTML 内使用
透过 HTML
<link>标签加载 CSS 时，可透过media属性区分不同媒体。<link rel="stylesheet" type="text/css" media="screen" href="style.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css">在 CSS 内使用
撰写 CSS 样式属性时，可撰写
@media与相关判断条件，区分不同媒体要套用的样式属性。@media screen{ 樣式... } @media print{ 樣式... }
使用
@import使用
@import加载其他 CSS 时，可在后方撰写相关媒体查询条件，让不同的媒体加载不同的 CSS。@import "style.css"; @import "print.css" print;
媒体类型 ( Media Types )
现行 CSS 支援的 Media 类型有以下三种 ( 其他像是 speech、tty、tv、projection...等已不支援，参考：W3C Media Types )：
| Type | 说明 |
|---|---|
| all | 所有设备。 |
| 印刷装置，包含使用打印预览产生的所有画面 ( 例如打印为 pdf )。 | |
| screen | 屏幕装置，不属于 print 的设备。 |
这三种类型必须写在语句的“开头”，不然就无法顺利执行，下方是可以正确执行的写法：
@media all {...}
@media print {...}
@media screen {...}
@media all and (max-width:200px) {...} /* 後方可串接條件語句 */
@media print and (max-width:200px) {...} /* 後方可串接條件語句 */
@media screen and (max-width:200px) {...} /* 後方可串接條件語句 */
@media (max-width:200px), all {...} /* 逗號後的開頭也可以 */
@media (max-width:200px), print {...} /* 逗號後的開頭也可以 */
@media (max-width:200px), screen {...} /* 逗號後的開頭也可以 */
下方写法为“错误”写法，无法正确执行：
@media (max-width:200px) and all {...}
@media (max-width:200px) and print {...}
@media (max-width:200px) and screen {...}
媒体特色 ( Media Features )
了解媒体类型后，会搭配一些“媒体特色 ( Media Features )”进行更进阶的逻辑判断，下方列出主要的媒体特色 ( 详细参考 W3C Media Features )
视窗或页面尺寸 ( Viewport/Page Dimensions )
Feature 数值 说明 width
max-width
min-width长度单位数值 屏幕宽度 height
max-height
min-height长度单位数值 屏幕高度 aspect-ratio
min-aspect-ratio
max-aspect-ratio宽/高 ( 无单位 ) 屏幕宽高比 orientation landscape ( 横 )、portrait ( 直 ) 装置方向。 device-width
min-device-width
max-device-width长度单位数值 装置屏幕宽度 device-height
min-device-height
max-device-height长度单位数值 装置屏幕高度 overflow-block none、scroll ( 滚动查看超出内容 )、paged ( 分页显示超出内容 ) 内容超出区块容器 overflow-inline none、scroll ( 滚动查看超出内容 ) 内容超出行内容器 显示质量 ( Display Quality )
Feature 数值 说明 resolution
max-resolution
min-resolution多少 dpi、多少 ppx 等 分辨率 scan interlace ( 交错式扫描 )、progressive ( 渐进式扫描 ) 电视扫描方式 update none ( 不会更新，例如印刷品 )、slow ( 更新慢 )、fast ( 更新快，例如电脑屏幕 ) 媒体更新速度 grid 0 ( 点阵 )、1 ( 网格 ) 网格媒体 颜色 ( Color Quality )
Feature 数值 说明 color
max-color
min-color0 ( 黑白装置 )、2 ( 2bit )、8 ( 8bit ) 等 输出装置的色彩比特数 color-index
max-color-index
min-color-index32、64、256 等 输出装置的色彩索引比特数 monochrome 0 ( 非色设备 ) 单色媒体功能 color-gamut srgb、p3、rec2020 输出装置的色域 dynamic-range standard、high 输出装置的亮度、对比和色彩 互动 ( Interaction Quality )
Feature 数值 说明 pointer、any-pointer none ( 没有指标 )、coarse ( 指标精度较差，例如触控屏幕 ) 和 fine ( 指标精度较高，例如鼠标 ) 装置的指标准确性 hover、any-hover none、hover 装置具备 hover 的能力
媒体查询条件语法
使用 Media Queries 时，除了基本的写法，还有另外四种条件语法，分别是 OR、AND、NOT 和 ONLY，撰写时前后条件使用“小括号 ()”包覆，当中的判断条件只能使用“:”赋予精确数值，不能使用大于小于等其他符号，此外 NOT 和 ONLY 必须摆在开头，相关语法如下：
<link rel="stylesheet" type="text/css" media="( 條件 ) , ( 條件 ) {...}" href="style.css"> <!-- OR 條件語法 -->
<link rel="stylesheet" type="text/css" media="( 條件 ) and ( 條件 ) {...}" href="print.css"> <!-- AND 條件語法 -->
<link rel="stylesheet" type="text/css" media="not ( 條件 ) {...}" href="style.css"> <!-- NOT 條件語法 -->
<link rel="stylesheet" type="text/css" media="only ( 條件 ) {...}" href="style.css"> <!-- ONLY 條件語法 -->
@media ( 條件 ) , ( 條件 ) {...} /* OR 條件語法 */
@media ( 條件 ) and ( 條件 ) {...} /* AND 條件語法 */
@media not ( 條件 ) {...} /* NOT 條件語法 */
@media only ( 條件 ) {...} /* ONLY 條件語法 */
@import "print.css" ( 條件 ) , ( 條件 ) {...}; /* OR 條件語法 */
@import "print.css" ( 條件 ) and ( 條件 ) {...}; /* AND 條件語法 */
@import "print.css" not ( 條件 ) {...}; /* NOT 條件語法 */
@import "print.css" only ( 條件 ) {...}; /* ONLY 條件語法 */
下方列出这四种条件语法的说明：
OR
OR 表示“或者”，使用逗号“
,”表示，只要前后的条件中有一个符合就会套用相关样式，例如下方范例，屏幕尺存小于等于 300px 或印刷时，字体会变成红色 50px，反之就是黑色默认字体大小。<!-- HTML 程式碼 --> <h1>hello oxxo</h1> <!-- CSS 程式碼 --> <style> @media (max-width:300px),print { h1 { color: red; font-size: 50px; } } </style>AND
AND 表示“且”，使用英文“
and”表示，需要前后的条件同时满足才会套用相关样式，例如下方范例，屏幕尺寸必须介于 200px～300px，且是屏幕相关类型时字体会变成红色 50px，反之就是黑色默认字体大小。<!-- HTML 程式碼 --> <h1>hello oxxo</h1> <!-- CSS 程式碼 --> <style> @media screen and (min-width:200px) and (max-width:300px) { h1 { color: red; font-size: 50px; } } </style>AND 和 OR 可以互相搭配使用，下方范例除了“屏幕”大小介于“200px~～00px”之间时，字体会是红色 50px，横向印刷也会是红色 50px 的字体。( 可从预览打印网页中选择横向打印看结果 )
<!-- HTML 程式碼 --> <h1>hello oxxo</h1> <!-- CSS 程式碼 --> <style> @media screen and (min-width:200px) and (max-width:300px), print and (orientation: landscape) { h1 { color: red; font-size: 50px; } } </style>
NOT
NOT 使用英文“
not”表示，表示“排除”某种特定条件才能套用某些样式，必须摆放在 Media Queries 的字首且针对“screen 和 print”使用 ( 不然就没有作用 )，由于大多数情况只需要 AND 和 OR，这个条件语法也越来越少见，下方范例执行后，除了彩色屏幕之外的装置，都会套用 example.css。<link rel="stylesheet" media="not screen and (color)" href="example.css" />NOT 可以搭配 OR 和 AND 共同使用，下方范例执行后，只有印刷时为横向，才会出现红色 50px 的字体。
<!-- HTML 程式碼 --> <h1>hello oxxo</h1> <!-- CSS 程式碼 --> <style> @media not screen, print and (orientation: landscape) { h1 { color: red; font-size: 50px; } } </style>
ONLY
ONLY 使用英文“
only”表示，表示“只有”某种特定条件才能套用某些样式，必须摆放在 Media Queries 的字首且针对“screen 和 print”使用 ( 不然就没有作用 )，由于大多数情况只需要 AND 和 OR，且针对装置套用 CSS 情况越来越少，这个条件语法也越来越少见 ( W3C 也只提供下方一行程序码 )。<link rel="stylesheet" media="only screen and (color)" href="example.css" />
透过 Media Queries 制作响应式网页 ( RWD )
因为响应式网页 ( RWD ) 必须要在“不同宽度”或“不同比例”的装置中显示网页，所以 @media 大多都是作为处理响应式网页使用，下方范例会呈现页面宽度在 200px～500px，使用 max-width 所表现的不同样式。
<!-- HTML 程式碼 -->
<h1>Hello OXXO!!</h1>
<!-- CSS 程式碼 -->
<style>
/* 螢幕時 */
@media screen {
h1{
font-size:60px;
color: gray;
}
}
/* 頁面最大寬度小於 500px */
@media (max-width:500px) {
h1{
font-size:50px;
color: blue;
}
}
/* 頁面最大寬度小於 400px */
@media (max-width:400px) {
h1{
font-size:40px;
color: green;
}
}
/* 頁面最大寬度小於 300px */
@media (max-width:300px) {
h1{
font-size:30px;
color: black;
}
}
/* 頁面最大寬度小於 200px */
@media (max-width:200px) {
h1{
font-size:20px;
color: red;
}
}
</style>
使用 @media 也需要遵循 CSS 的“权重”规则，后方的 @media 会在条件判断相同时，覆盖前方的 @media，如果将上方范例中的 @media screen 放到最后方，则前方所有的 @media 都会被覆盖而不呈现样式。
<!-- HTML 程式碼 -->
<h1>Hello OXXO!!</h1>
<!-- CSS 程式碼 -->
<style>
@media (max-width:500px) {
h1{
font-size:50px;
color: blue;
}
}
@media (max-width:400px) {
h1{
font-size:40px;
color: green;
}
}
@media (max-width:300px) {
h1{
font-size:30px;
color: black;
}
}
@media (max-width:200px) {
h1{
font-size:20px;
color: red;
}
}
/* 移動到最後方 */
@media screen {
h1{
font-size:60px;
color: gray;
}
}
</style>
因为权重的缘故，如果将上方范例改成 min-width，宽度的排列顺序就必须改成“小到大”，才不会因为权重复盖导致无法套用样式。
<!-- HTML 程式碼 -->
<h1>Hello OXXO!!</h1>
<!-- CSS 程式碼 -->
<style>
/* 小於 200px 時 */
@media screen {
h1{
font-size:60px;
color: gray;
}
}
/* 最小寬度 200px */
@media (min-width:200px) {
h1{
font-size:20px;
color: red;
}
}
/* 最小寬度 300px */
@media (min-width:300px) {
h1{
font-size:30px;
color: black;
}
}
/* 最小寬度 400px */
@media (min-width:400px) {
h1{
font-size:40px;
color: green;
}
}
/* 最小寬度 500px */
@media (min-width:500px) {
h1{
font-size:50px;
color: blue;
}
}
</style>
小结
@media 媒体查询是进行响应式网页开发时，不可或缺的重要技巧，如果自己的网页还没有使用响应式网页，不妨赶快透过 @media，让不同的装置都能顺利地浏览网页。
微信扫码关注
抖音扫码关注