媒体查询 @media screen

@media 是CSS中的一种语法，用于在不同的媒体设备（如桌面计算机、平板电脑、手机）上应用不同的样式。@media 规则包含在CSS样式表中，通过添加不同的媒体属性来确定哪个设备上应该应用哪个样式。最常见的媒体查询语法是 @media screen。

例如，假设我们想针对不同屏幕宽度设定不同样式，我们可以这样编写 @media screen 查询：

@media screen and (max-width: 600px) {
  /* 当屏幕小于或等于 600px 时应用样式 */
  body {
    background-color: lightblue;
  }
}
 
@media screen and (min-width: 601px) {
  /* 当屏幕大于 600px 时应用样式 */
  body {
    background-color: lightgreen;
  }
}

上述代码表示，当屏幕的宽度小于或等于 600px 时，背景颜色为 lightblue；当屏幕宽度大于 600px 时，背景颜色变为 lightgreen。

@media screen 是最常见的媒体查询，用于指定应用于屏幕的样式，你可以在 @media 中指定一些其他的媒体设备，比如 @media print 用于打印样式。

除了 @media screen，@media 还可以应用于其他媒体类型。下面是 @media 常见的媒体类型：

• @media screen：应用于显示器、平板电脑、智能手机等屏幕设备；

• @media print：应用于打印机、打印预览等设备；

• @media speech：应用于屏幕阅读器。

下面是具体的示例：

1. @media print：

@media print {
  body {
    color: black;
    background-color: white;
  }
}

1. 2.@media speech：

   @media speech {
     h1 {
       voice-family: "Microsoft YaHei", serif;
       speak: auto;
     }
   }
   

   值得注意的是，在 @media 中可以添加多个多个条件，用逗号分隔。例如，我们可以将查询“屏幕宽度小于或等于 600 像素并且设备是横向显示”的语法写成：

   @media screen and (max-width: 600px), screen and (orientation: landscape) {
     /* 当屏幕宽度小于或等于 600px 或 设备是横向显示时，应用此样式 */
     body {
       background-color: lightblue;
     }
   }
   

   这样写表示，当设备的屏幕宽度小于或等于 600 像素，并且设备是横向显示时，背景色为 lightblue。