CSS 媒体查询教程

媒体查询（Media Queries）是 CSS3 中的一个重要特性，它允许开发者根据设备的特性来编写不同的样式规则。通过媒体查询，我们可以让网页在不同设备上呈现出最佳效果。

以下是一些关于 CSS 媒体查询的基础知识：

语法：@media (条件) { 样式规则 }
条件：可以基于屏幕尺寸、分辨率、设备方向等特性来设置条件。
常用条件：
- screen：适用于所有屏幕设备。
- print：适用于打印机。
- orientation：设备方向，如 orientation: landscape 表示横屏。
- resolution：设备分辨率。

常见应用场景

响应式布局：通过媒体查询，可以为不同屏幕尺寸的设备设置不同的样式，实现响应式布局。
隐藏元素：在特定条件下隐藏某些元素，如在小屏幕上隐藏侧边栏。
调整字体大小：根据屏幕尺寸调整字体大小，提高阅读体验。

示例

@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

以上代码表示，当屏幕宽度大于等于 768px 时，字体大小为 16px；当屏幕宽度小于等于 768px 时，字体大小为 14px。

扩展阅读

想要了解更多关于 CSS 媒体查询的知识，可以访问本站的 CSS 媒体查询教程。