/* 默认情况下，设置根字体大小为 10px（用于 1rem = 10px 的计算方式） */
html {
  font-size: 10px; /* 默认字体大小 */
}

/* 适配小屏设备，视口宽度小于 320px */
@media (max-width: 320px) {
  html {
    font-size: 12px; /* 使根字体在极小设备上不会过小 */
  }
}

/* 适配宽度在 320px 到 480px 之间的设备（如小型手机） */
@media (min-width: 320px) and (max-width: 480px) {
  html {
    font-size: 14px; /* 设置根字体大小 */
  }
}

/* 适配宽度在 480px 到 768px 之间的设备（如普通手机） */
@media (min-width: 480px) and (max-width: 768px) {
  html {
    font-size: 16px; /* 设置根字体大小 */
  }
}

/* 适配宽度在 768px 到 1024px 之间的设备（如平板） */
@media (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: 18px; /* 设置根字体大小 */
  }
}

/* 适配宽度大于 1024px 的设备（如大屏手机或平板） */
@media (min-width: 1024px) {
  html {
    font-size: 20px; /* 设置根字体大小 */
  }
}

/* 适配更大屏幕的设备（如桌面设备） */
@media (min-width: 1280px) {
  html {
    font-size: 22px; /* 设置根字体大小 */
  }
}

/* 如果视口宽度大于 2560px，例如超大屏幕设备 */
@media (min-width: 2560px) {
  html {
    font-size: 24px; /* 设置根字体大小 */
  }
}