CSS3的媒体查询

CSS3 的媒体查询（Media Query）是一种用来查询设备特征，并根据不同的设备特征加载不同的 CSS 样式的技术。媒体查询可以根据设备的屏幕宽度、高度、方向、分辨率等特征来判断用户所使用的设备，并根据不同设备加载不同的 CSS 样式，以适应不同设备的屏幕尺寸和分辨率。

媒体查询可以用于实现响应式网页设计，即根据设备的特征来自适应地调整网页布局和样式。通过媒体查询，可以为不同的设备加载不同的样式，使网页在不同设备上显示更加合理和美观。

除了响应式网页设计，媒体查询还可以用于优化打印页面、调整屏幕方向、匹配特定的设备等。例如，可以使用媒体查询为移动设备加载单独的样式，以提高移动端用户的体验；也可以使用媒体查询为打印页面加载特定的样式，使打印页面更加美观和易读。

在 CSS3 中，可以使用 @media 规则来定义媒体查询。例如：

@media screen and (max-width: 768px) {
  /* 当屏幕宽度小于等于 768px 时加载的样式 */
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 769px) {
  /* 当屏幕宽度大于 769px 时加载的样式 */
  body {
    font-size: 20px;
  }
}
 

上面的代码表示在屏幕宽度小于等于 768px 时加载一个字号为 16px 的样式，而在屏幕宽度大于 769px 时加载一个字号为 20px 的样式。

媒体查询可以用来实现响应式网站设计，即根据设备的特征来自适应地调整网页布局和样式。同时，媒体查询还可以用于优化打印页面、调整屏幕方向、匹配特定的设备等。