媒体查询怎么监视不同的设备？

@media 媒体查询是CSS中用于根据不同的媒体类型或特定的设备条件应用样式的一种方式。通过媒体查询，你可以使网页在不同的屏幕大小、分辨率或设备类型下呈现不同的样式。

基础语法

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

• media-type：媒体类型，例如 screen（屏幕）、print（打印）、speech（语音）等。常用的是 screen。
• media-feature：媒体特性，用于描述设备的属性，例如 width（宽度）、height（高度）、max-width（最大宽度）、orientation（方向）等。

例子

/* 根据屏幕宽度应用不同的样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 根据设备方向应用不同的样式 */
@media screen and (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

/* 组合多个条件 */
@media screen and (min-width: 600px) and (max-width: 900px) {
  body {
    font-family: 'Arial', sans-serif;
  }
}

响应式设计的常见应用：

1.调整字体大小：

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

2.隐藏或显示特定元素：

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

3.调整布局：

@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

4.优化打印样式：

@media print {
  body {
    color: black;
  }
}