CSS中的media(媒体查询)详解

发表于 | 分类于
CSS中的media(媒体查询)详解

前言

CSS媒体查询是一种CSS功能，用于根据设备或浏览器的特性应用不同的样式规则。

媒体查询允许您根据屏幕尺寸、设备方向、分辨率和其他属性来调整网页的布局和样式，以实现响应式设计。

详细说明

以下是CSS媒体查询的详细说明：

基本语法

媒体查询使用 @media 规则来定义，并包含一个或多个媒体特性和一个或多个样式规则。基本语法如下：

1
2
3
@media media-type and (media-feature) {
  /* 样式规则 */
}

其中：

  • media-type 表示媒体类型，常见的媒体类型包括 all（所有设备）、screen（屏幕设备）、print（打印机）等。

    如果不指定媒体类型，则默认为 all。

  • media-feature 表示媒体特性，用于根据设备的属性来选择样式规则。

    常见的媒体特性包括 width（宽度）、height（高度）、orientation（方向）

    resolution（分辨率）等。

媒体特性

  • width 和 height：根据设备窗口的宽度和高度来选择样式规则。
  • orientation：根据设备的方向（横向或纵向）来选择样式规则。
  • min-width 和 max-width：设置设备窗口的最小和最大宽度来选择样式规则。
  • min-height 和 max-height：设置设备窗口的最小和最大高度来选择样式规则。
  • resolution：根据设备的分辨率来选择样式规则。
  • aspect-ratio：根据设备窗口的宽高比来选择样式规则。
  • device-aspect-ratio：根据设备屏幕的宽高比来选择样式规则。
  • color 和 color-index：根据设备的颜色和颜色索引来选择样式规则。

媒体查询组合

您可以使用逻辑运算符 and、or 和 not 来组合多个媒体查询。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 组合多个媒体查询 */
@media screen and (min-width: 600px) and (orientation: landscape) {
  /* 在这里应用适合大屏幕横向设备的样式 */
}

/* or 运算符 */
@media (min-width: 600px), print {
  /* 在这里应用适合宽度大于等于600px的样式，或打印样式 */
}

/* not 运算符 */
@media not screen {
  /* 在这里应用适合非屏幕设备的样式 */
}

嵌套媒体查询

您还可以嵌套媒体查询以更精确地选择样式规则。例如：

1
2
3
4
5
6
7
8
9
10
11
@media screen {
  /* 屏幕样式规则 */

  @media (min-width: 600px) {
    /* 大屏幕样式规则 */
  }

  @media (max-width: 600px) {
    /* 小屏幕样式规则 */
  }
}

媒体查询使您能够根据不同设备和浏览器的特性来提供自适应的网页样式。

通过根据屏幕尺寸、设备方向、分辨率等属性选择样式规则，您可以为不同设备提供最佳的用户体验。

常见的媒体查询

以下是一些常见的媒体查询选择：

设备宽度

设备宽度：媒体查询可以根据设备的宽度来选择适当的样式。

通常，您可以使用 min-width 和 max-width 来指定设备的最小和最大宽度。

例如：

1
2
3
4
5
6
7
8
9
/* 小屏幕设备，宽度小于600px */
@media screen and (max-width: 600px) {
  /* 在这里应用适合小屏幕的样式 */
}

/* 大屏幕设备，宽度大于等于1200px */
@media screen and (min-width: 1200px) {
  /* 在这里应用适合大屏幕的样式 */
}

设备方向

设备方向：媒体查询可以根据设备的方向（横向或纵向）来选择样式。

您可以使用 orientation 属性设置设备的方向。

例如：

1
2
3
4
5
6
7
8
9
/* 横向设备 */
@media screen and (orientation: landscape) {
  /* 在这里应用适合横向设备的样式 */
}

/* 纵向设备 */
@media screen and (orientation: portrait) {
  /* 在这里应用适合纵向设备的样式 */
}

分辨率

分辨率：媒体查询可以根据设备的分辨率来选择样式。

您可以使用 min-resolution 和 max-resolution 来设置设备的最小和最大分辨率。

例如：

1
2
3
4
5
6
7
8
9
/* 高分辨率设备，分辨率大于等于2x */
@media screen and (min-resolution: 2dppx) {
  /* 在这里应用适合高分辨率设备的样式 */
}

/* 低分辨率设备，分辨率小于1.5x */
@media screen and (max-resolution: 1.5dppx) {
  /* 在这里应用适合低分辨率设备的样式 */
}

这些只是媒体查询选择的几个示例，您可以根据项目需求和目标受众来选择适当的媒体查询。

可以根据屏幕尺寸、设备方向、分辨率等特性进行选择，以确保网页在不同设备上都能以最佳的方式呈现和交互。

项目实战

这里使用媒体查询和CSS变量结合使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 当屏幕宽度小于900px时应用的样式 */
@media (max-width: 900px) {
    :root {
        --content-width:100%;
    }
}

@media (min-width: 900px) and (max-width: 1200px) {
    :root {
        --content-width:900px;
    }
}

/* 当屏幕宽度大于1200px时应用的样式 */
@media (min-width: 1200px) {
    :root {
        --content-width:1200px;
    }
}

使用

1
width: var(--content-width);