css自适应屏幕大小

/* 使用媒体查询实现 CSS 自适应屏幕大小 */

/* 默认样式，适用于所有设备 */
body {
    font-size: 16px;
}

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

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

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

解释说明：

• 默认样式：定义了适用于所有设备的基础样式。
• 媒体查询：使用 @media 规则根据不同的屏幕宽度应用不同的样式。
  • 当屏幕宽度小于等于 600px 时，字体大小为 14px。
  • 当屏幕宽度在 601px 到 900px 之间时，字体大小为 18px。
  • 当屏幕宽度大于 900px 时，字体大小为 20px。

通过这种方式，可以确保网页在不同设备上都能有良好的显示效果。