网站开发进阶CSS3媒体查询@media_css @media only

在CSS中，媒体查询（Media Queries）是一种强大的工具，可以让你根据设备的特性（如屏幕尺寸、分辨率等）来应用不同的样式规则。

媒体查询可以使用两种方式：

1. 通过@media指令在CSS中直接使用。
2. 在HTML文档的<link>标签中使用。

下面是使用@media指令在CSS中的一个例子：

/* 应用于所有设备的基础样式 */
body {
  background-color: lightblue;
  color: white;
  font-size: 16px;
}
 
/* 仅当屏幕宽度至少为 600px 时应用以下样式 */
@media only screen and (min-width: 600px) {
  body {
    background-color: darkblue;
    color: black;
    font-size: 20px;
  }
}
 
/* 仅当设备是打印机时应用以下样式 */
@media print {
  body {
    background-color: white;
    color: black;
    font-size: 12px;
  }
}

在HTML中使用媒体查询的例子：

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在上述例子中，print.css样式表仅在打印文档时应用。

注意：在实际开发中，媒体查询通常用于响应式设计，以便让网站在不同的设备上都可以良好显示，提高用户体验。