/** * 响应式适配公用样式 * 断点：移动 ≤ 768px，平板 ≤ 1024px * * 引入位置：所有用户端 + 管理端 HTML 的 末尾 * 通用规则放这里；页面专属样式仍写在各自 CSS 里。 */ /* ============ 移动端通用规则 (≤ 768px) ============ */ @media (max-width: 768px) { html, body { font-size: 14px; -webkit-text-size-adjust: 100%; } /* 防止表单元素 iOS 自动放大（要求字号 ≥ 16px 否则 focus 会缩放） */ input, select, textarea, button { font-size: 16px !important; } /* 触控目标：按钮/链接最小 44×44，符合 WCAG / Apple HIG */ button, .btn, a.btn, [role="button"] { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } /* 通用容器：边距收紧 */ .container, .page, .main-content, .content { padding-left: 12px !important; padding-right: 12px !important; } /* 表格滚动兜底：在父容器上加 .table-responsive 即可横向滑动 */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive table { min-width: 640px; } /* 模态框/弹窗：占满宽度，留出 16px 安全边距 */ .modal, .dialog, .swal2-popup { max-width: calc(100vw - 32px) !important; width: calc(100vw - 32px) !important; } /* 隐藏明确标记的"仅桌面"元素 */ .desktop-only { display: none !important; } } /* 仅桌面显示 */ @media (min-width: 769px) { .mobile-only { display: none !important; } } /* ============ 平板（中等屏） ============ */ @media (max-width: 1024px) and (min-width: 769px) { .container, .page { padding-left: 20px; padding-right: 20px; } }