css media

/* 示例代码：使用 CSS Media Queries 实现响应式设计 */

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

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

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

解释说明：

• @media 规则用于根据不同的设备特性（如屏幕宽度）应用不同的样式。
• screen 表示这些样式适用于屏幕设备。
• and (max-width: 600px) 表示当屏幕的最大宽度为 600px 或更小时，应用该规则内的样式。
• and (min-width: 601px) and (max-width: 900px) 表示当屏幕的宽度在 601px 到 900px 之间时，应用该规则内的样式。
• and (min-width: 901px) 表示当屏幕的最小宽度为 901px 或更大时，应用该规则内的样式。

通过这种方式，可以根据不同的屏幕尺寸调整页面的布局和样式，从而实现响应式设计。