CSS中的媒体查询可以针对不同的屏幕尺寸和设备类型设置不同的样式，从而使页面在各种设备上都能够适配。使用媒体查询有两个主要的步骤：
/* 定义媒体查询条件 */
@media screen and (max-width: 768px) {
/* 在条件下设置样式 */
body {
font-size: 16px;
}
}
@media print {
/* 在条件下设置样式 */
body {
color: black;
background-color: white;
}
}在第一个媒体查询中，当屏幕宽度小于等于768px时，设置body的字体大小为16px。在第二个媒体查询中，当打印页面时，设置body的文字颜色为黑色，背景颜色为白色。
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is some text.</p>
</body>
</html>在上面的例子中，我们引用了两个CSS文件：style.css和mobile.css。mobile.css只会在屏幕宽度小于等于768px时生效，这是通过media属性指定的。这样，我们就可以针对不同的屏幕尺寸设置不同的样式，从而使页面在各种设备上都能够适配。
关键词高亮：媒体查询、屏幕尺寸、设备类型、CSS、link标签、media属性。