css 媒体查询

css 媒体查询

媒体查询（media query）是 CSS3 中的一个功能，它允许你根据设备的特定特征（如屏幕宽度、设备类型、屏幕方向等）来应用不同的样式。常用于响应式网页设计，因为它允许你根据设备的屏幕尺寸来调整页面的布局和内容。

媒体查询由一个可选的媒体类型（如 screen 或 print）和零个或多个表达式组成，表达式用来检查设备的特定特征。当媒体类型匹配且所有表达式都为真时，媒体查询中定义的样式将被应用。

下面是一个简单的例子，演示了如何使用媒体查询来定义不同屏幕尺寸下的样式：

@media (max-width: 600px) {

  /* 当屏幕宽度小于等于 600 像素时应用这些样式 */

  body {

    background-color: lightblue;

  }

}

@media (min-width: 601px) and (max-width: 800px) {

  /* 当屏幕宽度在 601 像素到 800 像素之间时应用这些样式 */

  body {

    background-color: lightgreen;

  }

}

@media (min-width: 801px) {

  /* 当屏幕宽度大于等于 801 像素时应用这些样式 */

  body {

    background-color: lightpink;

  }

}

这个例子定义了三个媒体查询，分别针对不同的屏幕尺寸。

当屏幕宽度小于等于 600 像素时，页面背景颜色将变为浅蓝色；当屏幕宽度在 601 像素到 800 像素之间时，页面背景颜色将变为浅绿色；当屏幕宽度大于等于 801 像素时，页面背景颜色将变为浅粉色。