Media Query 在 CSS 中使用的一个具体例子

在 CSS 中，Media Query 是一种用于指定不同屏幕尺寸和设备类型的样式表的技术。如下图所示：

all and (max-width:360px) 是一个 Media Query 表达式，它指定了一个条件，只有在满足条件时，Media Query 中的样式才会生效。

具体来说，all 表示所有媒体类型都应用该样式，包括屏幕、打印机、投影仪等。and 表示在 all 的基础上，要同时满足 max-width:360px 的条件才能应用该样式。其中，max-width:360px 是一个媒体特性，指定了屏幕宽度最大为 360 像素时应用该样式。

因此，all and (max-width:360px) 的含义是，在所有媒体类型中，仅在屏幕宽度最大为 360 像素时应用该样式。这种技术通常用于为不同屏幕尺寸和设备类型提供不同的布局和样式，以实现响应式设计。

以下是一个在 CSS 文件中使用 Media Query 的具体例子：

/* 在屏幕宽度小于 768px 时应用该样式 */
@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
    background-color: #f5f5f5;
  }
}
/* 在屏幕宽度大于等于 768px 时应用该样式 */
@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
    background-color: #fff;
  }
}

这段 CSS 代码中使用了两个 Media Query 表达式，分别在不同的屏幕宽度下应用不同的样式。

第一个 Media Query 表达式 @media screen and (max-width: 767px) 表示在屏幕宽度小于 768 像素时应用该样式，其中 screen 表示媒体类型为屏幕，max-width: 767px 表示屏幕宽度最大为 767 像素。

第二个 Media Query 表达式 @media screen and (min-width: 768px) 表示在屏幕宽度大于等于 768 像素时应用该样式，其中 min-width: 768px 表示屏幕宽度最小为 768 像素。

在这个例子中，我们根据不同的屏幕宽度设置了不同的字体大小和背景色，从而实现了响应式设计。当屏幕宽度小于 768 像素时，页面会显示较小的字体和浅灰色背景。

————————————————

版权声明：本文为CSDN博主「汪子熙」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/i042416/article/details/129727262