css @media

/* 示例代码：使用 @media 查询来设置不同屏幕尺寸下的样式 */

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

/* 当屏幕宽度在 601px 到 1200px 之间时，应用以下样式 */
@media only screen and (min-width: 601px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }
}

/* 当屏幕宽度大于 1200px 时，应用以下样式 */
@media only screen and (min-width: 1201px) {
  body {
    background-color: lightcoral;
  }
}

解释说明：

• @media 是 CSS 中用于响应式设计的关键字，允许根据不同的设备特性（如屏幕宽度、高度、方向等）应用不同的样式。
• only screen 表示这些样式仅适用于屏幕设备。
• and (max-width: 600px) 表示当屏幕的最大宽度为 600px 或更小时，应用该样式。
• and (min-width: 601px) and (max-width: 1200px) 表示当屏幕的宽度在 601px 到 1200px 之间时，应用该样式。
• and (min-width: 1201px) 表示当屏幕的最小宽度为 1201px 或更大时，应用该样式。

通过这种方式，可以确保网站在不同设备和屏幕尺寸下都能有良好的显示效果。