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

媒体查询语法

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

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

其中,media-type 表示媒体类型,如 screenprint 等;expression 表示媒体查询的条件,如 min-width: 600px

常用媒体查询

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

  • 屏幕宽度min-widthmax-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 媒体查询高级教程

CSS 媒体查询示例