CSS - 媒体查询：初学者指南

你好，未来的网页开发者们！今天，我们将深入探索CSS媒体查询的精彩世界。作为你友好的计算机老师邻居，我将引导你一步步走过这段旅程。不用担心你之前从未编写过代码——我们将从基础开始，逐步提升。那么，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

什么是媒体查询？

在我们深入细节之前，先来理解一下媒体查询是什么。想象你正在设计一个在电脑上看起来很棒的网站。但当有人在手机上查看它时会发生什么？这时媒体查询就派上用场了！它们允许你的网站适应不同的屏幕大小和设备。这就好比你的网站像变色龙一样，根据环境改变外观。

语法

现在，让我们来看看媒体查询的基本语法：

@media mediatype and (condition) {
/* CSS 规则放在这里 */
}

别被这个吓到了！我们会分解它：

• @media：这告诉浏览器，“嘿，我即将设置一些条件！”
• mediatype：这指定我们正在针对哪种媒体类型（我们稍后会覆盖这些）。
• and：这是我们如何组合条件。
• (condition)：这是我们设置具体条件的地方。

媒体类型

媒体类型告诉浏览器我们在针对哪种设备。以下是一些主要的类型：

媒体类型	描述
all	适用于所有设备
print	用于打印机
screen	用于电脑屏幕、平板电脑和智能手机

逻辑运算符

我们可以使用逻辑运算符创建更复杂的查询：

运算符	描述
and	组合多个媒体特性
not	否定一个媒体查询
only	仅当整个查询匹配时才应用样式
,	组合多个媒体查询

CSS 媒体类型 - All

all 媒体类型就像瑞士军刀——适用于所有设备。以下是一个例子：

@media all {
body {
background-color: lightblue;
}
}

这将为所有设备设置背景颜色为浅蓝色。简单吧？

CSS 媒体类型 - Print

print 媒体类型非常适合在有人想要打印页面时设置网页样式。让我们看看它的作用：

@media print {
body {
font-size: 12pt;
}
.no-print {
display: none;
}
}

这会增大字体大小以便更好地阅读，并在打印时隐藏具有 no-print 类的元素。

CSS 媒体类型 - Screen

screen 媒体类型可能是你最常使用的。它适用于任何基于屏幕的设备。以下是一个例子：

@media screen and (max-width: 600px) {
.menu {
width: 100%;
}
}

当屏幕宽度为600像素或更小时，这会使菜单占据屏幕的整个宽度。

CSS 媒体类型 - 使用逗号

我们可以使用逗号针对多个媒体类型。这就好比邀请多个朋友参加派对：

@media screen, print {
body {
line-height: 1.5;
}
}

这会为屏幕和打印媒体类型设置行高。

CSS 媒体类型 - 使用 Only

only 关键字就像夜总会的保镖。它确保不支持媒体查询的旧浏览器不应用这些样式：

@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
}

CSS 媒体查询 - 范围

我们还可以为条件指定范围：

@media screen and (min-width: 600px) and (max-width: 900px) {
.sidebar {
display: none;
}
}

当屏幕宽度在600px到900px之间时，这会隐藏侧边栏。

媒体特性

媒体特性允许我们测试用户设备或浏览器的特定特征。以下是一些常见的特性：

特性	描述
width	视口宽度
height	视口高度
aspect-ratio	宽高比
orientation	横屏或竖屏
resolution	设备的像素密度

创建复杂的媒体查询

让我们用一个更复杂的例子来把所有这些都放在一起：

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
}

这会在宽度在600px到900px之间且为横屏的屏幕上创建一个两列布局。

CSS 媒体查询 - 结合多种类型或特性

我们可以使用 and 运算符结合多种类型或特性：

@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
.content {
font-size: 14px;
}
}

这会为宽度在600px到900px之间的屏幕，或者在宽度不超过600px的打印纸上应用样式。

CSS 媒体查询 - 测试多个查询

有时，我们希望如果多个查询中的任何一个为真，就应用样式。我们使用逗号来表示这个：

@media (min-width: 600px), (orientation: landscape) {
.header {
position: sticky;
top: 0;
}
}

如果屏幕宽度至少为600px或屏幕为横屏，这会使标题栏固定在顶部。

CSS 媒体查询 - 反转查询的含义

not 关键字允许我们反转查询的含义：

@media not all and (orientation: landscape) {
.sidebar {
float: left;
}
}

除非设备为横屏，否则这会使侧边栏向左浮动。

CSS 媒体查询 - 提高旧浏览器的兼容性

对于不支持媒体查询的旧浏览器，我们可以提供回退样式：

.container {
width: 100%; /* 旧浏览器的回退 */
}

@media screen and (min-width: 600px) {
.container {
width: 80%;
}
}

这确保即使在不懂媒体查询的浏览器上也能有一个不错的布局。

那么，你已经迈出了进入响应式网页设计世界的第一步，使用CSS媒体查询。记住，熟能生巧，所以不要害怕尝试这些概念。快乐编码！

Credits: Image by storyset