CSS 媒体查询：适应不同设备和屏幕大小

了解媒体查询

媒体查询是一种 CSS 规则，它允许你基于特定条件应用样式。这些条件可以是屏幕的宽度或高度、设备类型或其他特性。媒体查询使用以下语法：

@media screen and (max-width: 600px) {
  /* 适用于宽度小于或等于 600px 的屏幕 */
}

响应式设计原则

使用媒体查询进行响应式设计时，遵循以下原则至关重要：

• 移动优先: 从为最小屏幕尺寸设计开始，然后逐步扩大到更大的屏幕。
• 渐进增强: 随着屏幕尺寸的增加，逐步添加功能和样式，而不是删除它们。
• 断点: 定义一系列断点，表示不同的屏幕尺寸范围，并在这些断点处应用不同的样式。

常用媒体查询类型

宽度断点:

• @media (max-width: 600px): 适用于宽度小于或等于 600px 的屏幕（智能手机）
• @media (min-width: 1200px): 适用于宽度大于或等于 1200px 的屏幕（台式机）

高度断点:

• @media (max-height: 400px): 适用于高度小于或等于 400px 的屏幕（短智能手机）
• @media (min-height: 800px): 适用于高度大于或等于 800px 的屏幕（平板电脑）

设备类型:

• @media (hover: none): 适用于没有悬停能力的设备（触摸屏设备）
• @media (print): 适用于打印输出

其他特性:

• @media (resolution: 144dpi): 适用于分辨率为 144dpi 的屏幕
• @media (orientation: portrait): 适用于纵向屏幕

媒体查询在实践中的应用

媒体查询可用于调整各种元素的样式，例如：

• 布局: 改变布局网格、列宽和元素位置
• 文字: 调整字体大小、行高和颜色
• 图像: 裁剪或调整大小以适应不同屏幕
• 动画: 根据屏幕尺寸启用或禁用动画
• 导航: 更改导航菜单的结构和行为

示例

下面是一个样例展示了如何使用媒体查询调整布局：

/* 适用于宽度小于或等于 600px 的屏幕 */
@media screen and (max-width: 600px) {
  .container {
    width: 100%;
    flex-direction: column;
  }
}

/* 适用于宽度大于 600px 的屏幕 */
@media screen and (min-width: 600px) {
  .container {
    width: 70%;
    flex-direction: row;
  }
}

通过遵循响应式设计原则和使用媒体查询，你可以创建适应各种设备和屏幕大小的动态且用户友好的网站。