CSS 媒体查询教程

CSS 媒体查询是一种非常实用的技术，它允许我们根据不同的设备或屏幕尺寸来应用不同的样式。下面，我们将详细介绍 CSS 媒体查询的使用方法。

媒体查询语法

媒体查询的基本语法如下：

@media media-type and (expression) {
  CSS样式;
}

其中，media-type 表示媒体类型，如 screen、print 等；expression 表示媒体查询的条件，如 min-width: 600px。

常用媒体查询

以下是一些常用的媒体查询：

屏幕宽度：min-width 和 max-width
设备方向：orientation
分辨率：resolution

屏幕宽度

@media screen and (min-width: 600px) {
  /* 当屏幕宽度大于或等于 600px 时应用的样式 */
}

设备方向

@media screen and (orientation: landscape) {
  /* 当设备方向为横屏时应用的样式 */
}

分辨率

@media screen and (min-resolution: 192dpi) {
  /* 当分辨率大于或等于 192dpi 时应用的样式 */
}

实例

以下是一个简单的例子，展示如何使用媒体查询来改变按钮的样式：

button {
  background-color: blue;
  color: white;
}

@media screen and (min-width: 768px) {
  button {
    background-color: green;
    color: black;
  }
}

在这个例子中，当屏幕宽度大于或等于 768px 时，按钮的背景颜色会变为绿色，文字颜色变为黑色。

扩展阅读

想了解更多关于 CSS 媒体查询的知识？请阅读我们的CSS 媒体查询高级教程。