CSS3 mediaQuery：跨设备自适应布局的利器

媒体查询（mediaQuery）是 CSS3 中的一项强大功能，它允许您针对不同的设备屏幕尺寸和方向定制网站样式。通过使用媒体查询，您可以创建响应式网站，在不同大小的屏幕上都能提供最佳用户体验。

如何使用媒体查询？

媒体查询使用 @media 规则，后跟要查询的媒体特性。语法如下：

@media [media-type] and (min-width: x) and (max-width: y) {
  /* 针对满足条件的设备的 CSS 样式 */
}

其中，[media-type] 可以是以下值之一：

• all：针对所有设备
• screen：针对屏幕设备（例如台式机、笔记本电脑、智能手机）
• print：针对打印设备
• handheld：针对手持设备（例如智能手机）

(min-width: x) 和 (max-width: y) 确定媒体查询适用的设备屏幕宽度范围。您可以使用其他媒体特性，例如 (orientation: portrait) 或 (resolution: 72dpi)，以进一步细化您的查询。

媒体查询在实践中的应用

响应式布局： 媒体查询最常见的用法是创建响应式布局。通过针对不同的屏幕尺寸编写特定样式，您可以确保您的网站在各种设备上都能正确显示。例如：

@media (max-width: 768px) {
  #sidebar {
    display: none;
  }
}

此媒体查询隐藏了屏幕宽度小于 768 像素的设备上的侧边栏。

设备特定样式： 媒体查询还可以用于提供针对特定设备的定制样式。例如，您可以为触摸屏设备添加触摸目标，或为高分辨率设备加载更高质量的图像。

@media (hover: none) {
  a {
    padding: 12px;
  }
}

此媒体查询为没有悬停功能的设备（例如触摸屏设备）增加按钮的填充。

Bootstrap 4 中的媒体查询

Bootstrap 4 提供了内置的媒体查询，用于创建响应式布局。它将屏幕划分为五类：

屏幕宽度	类名
≤ 575px	.col-xs-*
576px - 767px	.col-sm-*
768px - 991px	.col-md-*
992px - 1199px	.col-lg-*
≥ 1200px	.col-xl-*

您可以使用这些类名快速轻松地创建响应式网格系统。

结语

媒体查询是 CSS3 中的一项必不可少的工具，用于创建响应式、用户友好的网站。通过针对不同的设备屏幕尺寸和方向定制样式，您可以确保您的网站在各种设备上都能提供最佳的用户体验。