/* 响应式布局基准设置 */

/* PC端基准宽度：1920px */
html {
  font-size: 16px; /* 基础字体大小 */
}

@media screen and (min-width: 1921px) {
  .container {
    max-width: 1800px; /* 在超大屏幕上限制最大宽度 */
  }
}

@media screen and (min-width: 1201px) and (max-width: 1920px) {
  html {
    /* 根据实际宽度动态调整字体大小，使其相对于1920px基准 */
    font-size: calc(16px * (100vw / 1920));
  }

  .container {
    width: 94%;
    max-width: 1800px;
  }
}

/* 平板设备断点 */
@media screen and (min-width: 961px) and (max-width: 1200px) {
  html {
    font-size: calc(15px * (100vw / 1200));
  }

  .container {
    width: 94%;
    max-width: 1140px;
  }
}

/* 移动端基准宽度：960px */
@media screen and (max-width: 960px) {
  html {
    /* 根据实际宽度动态调整字体大小，使其相对于960px基准 */
    font-size: calc(14px * (100vw / 960));
  }

  .container {
    width: 92%;
    max-width: 900px;
  }
}

/* 小屏幕移动设备 */
@media screen and (max-width: 576px) {
  html {
    font-size: calc(14px * (100vw / 576));
  }

  .container {
    width: 90%;
    padding: 0 10px;
  }
}

/* rem单位响应式辅助类 */
.responsive-width {
  width: 100%;
  max-width: 100%;
}

/* 图片响应式处理 */
img.responsive {
  max-width: 100%;
  height: auto;
}

/* 视口宽度显示 - 用于开发调试 */
.viewport-width {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 9999;
  display: none;
}

/* 仅在开发模式下显示 */
.debug .viewport-width {
  display: block;
}