媒体查询

CSS 媒体查询是一种强大的工具，它允许开发者根据设备的特定条件（如视口宽度、屏幕分辨率、设备方向等）来应用不同的样式规则。这使得网页设计能够响应不同的设备和视口大小，实现响应式布局。

以下是一些关于 CSS 媒体查询的关键点：

1. 媒体类型：
   媒体查询最初是用于定义不同媒体类型的样式，如屏幕、打印、电视等。最常用的媒体类型是 screen，用于电脑屏幕、手机和平板等设备。

2. 媒体特性：
   媒体查询的核心是检测媒体特性并根据其值应用样式。一些常见的媒体特性包括：

   • width 和 height：指的是视口或设备的宽度和高度。
   • orientation：检测设备的方向，可以是 portrait（竖屏）或 landscape（横屏）。
   • aspect-ratio：设备的宽高比。
   • color、color-index、monochrome：与颜色显示相关的特性。
   • resolution：设备的分辨率。

3. 语法：
   媒体查询的语法通常如下：

   @media media-type and (media-feature) {
     /* CSS rules go here */
   }
   

   例如，一个简单的媒体查询可能看起来像这样：

   @media screen and (min-width: 768px) {
     body {
       background-color: lightgreen;
     }
   }
   

   这个例子中，当屏幕视口宽度至少为 768 像素时，背景颜色将变为浅绿色。

4. 逻辑操作符：
   在媒体查询中，可以使用逻辑操作符来组合多个媒体特性条件：

   • and: 所有条件都必须满足。
   • ,: 其中任何一个条件满足即可。
   • not: 指定条件不满足。

5. 使用场景：
   媒体查询在响应式设计中非常有用，可以用来改变布局、调整字体大小、隐藏或显示某些元素等。通过使用媒体查询，我们可以确保网站在各种设备和视口尺寸上都能提供良好的用户体验。

总的来说，CSS 媒体查询是一个强大的工具，它让我们能够创建适应各种设备和屏幕尺寸的动态布局和样式。通过灵活运用媒体查询，我们可以实现真正的响应式网页设计。