CSS | 媒体查询

介绍

CSS | 媒体查询是CSS3的一项功能，它允许您为不同的媒体类型和不同的设备大小指定不同的样式规则。使用媒体查询，您可以创建适应不同设备和不同视口大小的响应式设计。

如何使用

在CSS中，媒体查询使用@media规则表示。以下是媒体查询的基本语法：

@media mediatype and|not|only (media feature) {
  CSS-Code;
}

其中，mediatype可以是all、screen、print等媒体类型之一。media feature可用于指定媒体查询的条件，例如设备的宽度、高度、方向等。

以下是一个简单的例子，仅当设备宽度小于600像素时才应用样式规则：

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

媒体查询的常见用法

1. 基本媒体查询

使用媒体查询为不同的设备大小指定不同的样式规则。

@media (max-width: 768px) {
  /* 样式规则 */
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* 样式规则 */
}

@media (min-width: 1024px) {
  /* 样式规则 */
}

2. 响应式图片

使用媒体查询为不同的设备大小指定不同的图片大小。

img {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  img {
    width: 50%;
    height: auto;
  }
}

@media (min-width: 1024px) {
  img {
    width: 33.33%;
    height: auto;
  }
}

3. 隐藏元素

使用媒体查询隐藏不必要的元素。

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

4. 修改字体大小

使用媒体查询为不同的设备大小指定不同的字体大小。

body {
  font-size: 16px;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

总结

使用CSS | 媒体查询，可以轻松创建适应不同视口大小的响应式设计。根据需要使用媒体查询为不同的设备大小指定不同的样式规则、图片大小、字体大小等。