zh/css_media_queries

CSS 媒体查询是前端开发中一个非常重要的概念，它允许开发者根据不同的设备特性来应用不同的样式。以下是一些关于 CSS 媒体查询的常见用法：

常见媒体查询类型

• 宽度查询：根据屏幕宽度来应用样式。
  • <link rel="stylesheet" media="(max-width: 600px)" href="small-screen.css">
• 高度查询：根据屏幕高度来应用样式。
  • <link rel="stylesheet" media="(min-height: 400px)" href="tall-screen.css">
• 分辨率查询：根据设备的像素密度来应用样式。
  • <link rel="stylesheet" media="(min-resolution: 192dpi)" href="high-res.css">

媒体查询实例

假设我们有一个网页，当屏幕宽度小于 768px 时，我们需要改变布局。我们可以这样写：

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

在这个例子中，当屏幕宽度小于或等于 768px 时，.container 类的宽度将被设置为 100%。

扩展阅读

想要了解更多关于 CSS 媒体查询的信息？请访问我们的CSS 媒体查询教程。