如何使用@media调整响应式显示？

@media是CSS中的一个关键字，用于根据设备的不同特性和屏幕尺寸来调整网页的样式和布局，实现响应式显示。

使用@media调整响应式显示的步骤如下：

1. 在CSS文件中使用@media关键字，后面跟着一个媒体查询条件，用于指定在特定条件下应用的样式。
2. 媒体查询条件可以是设备的特性，如屏幕宽度、屏幕高度、屏幕方向、设备类型等。也可以是视口的特性，如视口宽度、视口高度等。
3. 在媒体查询条件中，可以使用逻辑运算符（and、or、not）和比较运算符（<、>、=）来组合多个条件。
4. 在媒体查询条件后面使用大括号{}，在大括号中编写需要应用的样式。

示例代码如下：

/* 当屏幕宽度小于等于600px时应用的样式 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 当屏幕宽度大于600px且小于等于1200px时应用的样式 */
@media (min-width: 601px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }
}

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

在上述示例中，根据屏幕宽度的不同，分别应用了不同的背景颜色。当屏幕宽度小于等于600px时，背景颜色为浅蓝色；当屏幕宽度大于600px且小于等于1200px时，背景颜色为浅绿色；当屏幕宽度大于1200px时，背景颜色为浅黄色。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云人工智能：https://cloud.tencent.com/product/ai