/* 基础响应式重置 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* 移动端通用样式 (屏幕宽度 ≤ 768px，覆盖大部分手机) */
  @media only screen and (max-width: 768px) {
    /* 1. 全局容器适配 */
    .container, .wrapper, .main {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 10px !important;
      margin: 0 auto !important;
      float: none !important;
    }
  
    /* 2. 字体适配 (避免文字过大/过小) */
    body {
      font-size: 14px !important;
      line-height: 1.5 !important;
    }
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    p, a, span { font-size: 14px !important; }
  
    /* 3. 图片自适应 (避免图片溢出) */
    img {
      max-width: 100% !important;
      height: auto !important;
      display: block !important;
    }
  
    /* 4. 导航栏适配 (解决导航错乱) */
    .nav, .menu {
      width: 100% !important;
      float: none !important;
    }
    .nav li, .menu li {
      display: block !important;
      width: 100% !important;
      margin: 5px 0 !important;
      float: none !important;
    }
    .nav a, .menu a {
      display: block !important;
      padding: 8px 5px !important;
      text-align: center !important;
    }
  
    /* 5. 布局元素重置 (清除浮动、列布局改为单行) */
    .col, .column, .float-left, .float-right {
      float: none !important;
      width: 100% !important;
      margin: 10px 0 !important;
    }
  
    /* 6. 按钮/表单适配 */
    button, .btn, input, textarea, select {
      width: 100% !important;
      padding: 10px !important;
      margin: 5px 0 !important;
      font-size: 14px !important;
    }
  
    /* 7. 页脚/头部适配 */
    header, footer {
      padding: 15px 10px !important;
      width: 100% !important;
    }
  
    /* 8. 隐藏移动端不需要的元素 (可选，根据实际情况调整) */
    .pc-only {
      display: none !important;
    }
  
    /* 9. 解决溢出问题 (避免横向滚动) */
    html, body {
      overflow-x: hidden !important;
      width: 100% !important;
    }
  
    /* 10. 间距优化 (调整元素上下间距，避免拥挤) */
    .margin-top, .margin-bottom, .padding-top, .padding-bottom {
      margin-top: 10px !important;
      margin-bottom: 10px !important;
      padding-top: 10px !important;
      padding-bottom: 10px !important;
    }
  }
  
  /* 小屏手机适配 (≤ 480px，如iPhone SE) */
  @media only screen and (max-width: 480px) {
    body {
      font-size: 13px !important;
    }
    h1 { font-size: 18px !important; }
    h2 { font-size: 16px !important; }
    h3 { font-size: 15px !important; }
    
    /* 进一步缩小间距，适配更小屏幕 */
    .container, .wrapper {
      padding: 0 5px !important;
    }
    .nav a, .menu a {
      padding: 6px 5px !important;
    }
  }