CSS Media Queries：介绍与使用

CSS Media Queries 是一种强大的工具，用于创建响应式设计。它允许你根据不同的设备特性（如屏幕尺寸、分辨率等）来应用不同的样式。

@media

介绍

@media 规则用于定义当满足某些条件时应用的 CSS 样式。

使用示例

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

说明

当屏幕宽度小于或等于 600px 时，背景色将变为浅蓝色。

min-width 和 max-width

介绍

用于设置媒体查询的最小和最大宽度。

使用示例

@media (min-width: 600px) and (max-width: 1200px) {
  p {
    font-size: 18px;
  }
}

说明

当屏幕宽度在 600px 到 1200px 之间时，段落的字体大小将设置为 18px。

orientation

介绍

用于检测设备是处于横屏还是竖屏模式。

使用示例

@media (orientation: landscape) {
  body {
    background-color: green;
  }
}

说明

当设备处于横屏模式时，背景色将变为绿色。

print

介绍

用于定义打印样式。

使用示例

@media print {
  body {
    font-size: 14pt;
  }
}

说明

在打印页面时，字体大小将设置为 14pt。

resolution

介绍

用于根据屏幕分辨率应用样式。

使用示例

@media (min-resolution: 300dpi) {
  img {
    width: 200px;
  }
}

说明

当设备的屏幕分辨率至少为 300dpi 时，图像宽度将设置为 200px。

常用推荐

1. @media (max-width: 600px): 非常适用于移动优先的设计。
2. @media print: 为打印优化你的网站是一个好习惯。
3. @media (orientation: landscape): 当你需要特别处理横屏显示时非常有用。

希望这篇文章能帮助你更好地理解和使用 CSS Media Queries！