CSS媒介查询|极客教程

CSS媒介查询

什么是CSS媒介查询？

CSS媒介查询是一种允许网页样式随着不同媒体和设备属性改变而自适应的技术。通过在CSS中嵌入媒介查询，我们可以为不同的设备和屏幕尺寸定义不同的样式规则，从而实现响应式设计。使用媒介查询，可以让网页在不同设备上具有更好的用户体验和可用性。

媒介查询语法

媒介查询的语法通常包括以下几个部分：

@media 关键字：表示这是一个媒介查询。
媒体类型：指定要应用样式的设备或媒体类型，如screen、print、speech等。
媒体特性：定义媒体查询的特性，如宽度、高度、方向等。
样式规则：定义当满足媒体查询条件时应用的样式。

下面是一个简单的媒体查询示例：

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

在这个示例中，我们针对屏幕宽度小于600px的情况定义了一个背景颜色的样式规则。

常用的媒介特性

1. `width` 和 `height`

width 和 height 特性用来指定设备的宽度和高度，可以根据设备的尺寸来应用不同的样式。

@media screen and (max-width: 768px) {
  /* 在宽度小于768px时应用的样式 */
}

@media screen and (min-width: 1024px) {
  /* 在宽度大于等于1024px时应用的样式 */
}

2. `orientation`

orientation 特性用来指定设备的方向，可选值为 landscape（横向）和 portrait（纵向）。

@media screen and (orientation: landscape) {
  /* 在横向模式下应用的样式 */
}

@media screen and (orientation: portrait) {
  /* 在纵向模式下应用的样式 */
}

3. `device-width` 和 `device-height`

device-width 和 device-height 特性用来指定设备的屏幕宽度和高度。

@media screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* 在屏幕宽度在320px到480px范围内应用的样式 */
}

4. `max-device-aspect-ratio` 和 `min-device-aspect-ratio`

max-device-aspect-ratio 和 min-device-aspect-ratio 特性用来指定设备的屏幕宽高比。

@media screen and (min-device-aspect-ratio: 16/9) {
  /* 在屏幕宽高比大于等于16:9时应用的样式 */
}

媒介查询的嵌套

在实际开发中，可以将不同的媒体特性组合起来形成更复杂的媒体查询条件。媒体查询支持嵌套，可以嵌套多个条件来进行更精确的样式匹配。

@media screen and (max-width: 768px) and (orientation: portrait) {
  /* 在宽度小于768px且为纵向模式时应用的样式 */
}

响应式设计示例

下面是一个简单的响应式设计示例，根据屏幕宽度不同应用不同的背景颜色：

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

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

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

在这个示例中，当屏幕宽度小于768px时，背景颜色为浅蓝色；在768px到1024px之间，背景颜色为浅绿色；在大于等于1024px时，背景颜色为浅黄色。