/** * 超级品牌管理系统 - 移动端通用优化样式 * 适用于所有管理后台页面 * * 使用方法：在页面 中添加： * */ /* ==================== 移动端基础适配 ==================== */ @media (max-width: 767px) { /* 全局重置 */ body { font-size: 14px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* 容器适配 */ .container, .page-container, .content-wrapper { padding: 12px; width: 100%; max-width: 100%; } /* 标题适配 */ h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 16px; } /* 卡片适配 */ .card { margin-bottom: 12px; padding: 16px; border-radius: 8px; } /* 网格布局适配 */ .grid, .grid-2, .grid-3, .grid-4, .stats-grid { grid-template-columns: 1fr !important; gap: 12px; } /* 表格响应式 */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { font-size: 13px; } table th, table td { padding: 8px; white-space: nowrap; } /* 按钮适配 */ .btn, button { min-height: 44px; min-width: 44px; padding: 10px 16px; font-size: 14px; } .btn-group { flex-direction: column; gap: 8px; } .btn-group .btn { width: 100%; } /* 表单适配 */ .form-group, .form-row { flex-direction: column; gap: 8px; } input, select, textarea { font-size: 16px; /* 防止iOS自动缩放 */ min-height: 44px; } /* 弹窗适配 */ .modal, .dialog { width: 95% !important; max-width: 95%; margin: 10px auto; max-height: 90vh; overflow-y: auto; } .modal-header, .modal-footer { padding: 12px; } .modal-body { padding: 12px; max-height: 70vh; overflow-y: auto; } /* 侧边栏适配 */ .sidebar { position: fixed; left: -280px; top: 0; height: 100vh; z-index: 1000; transition: left 0.3s; } .sidebar.open { left: 0; } .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; } .sidebar.open + .sidebar-overlay { display: block; } /* 移动端顶部栏 */ .mobile-header { display: flex; position: fixed; top: 0; left: 0; right: 0; height: 56px; background: #fff; border-bottom: 1px solid #e8e8e8; align-items: center; padding: 0 12px; z-index: 998; } .main-content { margin-left: 0; padding-top: 68px; } /* 搜索框适配 */ .search-box { width: 100%; max-width: 100%; } /* 统计卡片 */ .stat-card { padding: 16px; } .stat-value { font-size: 24px; } /* 隐藏桌面端元素 */ .desktop-only { display: none !important; } /* 显示移动端元素 */ .mobile-only { display: block !important; } } /* ==================== 小屏幕手机适配 ==================== */ @media (max-width: 479px) { body { font-size: 13px; } .container { padding: 8px; } .card { padding: 12px; margin-bottom: 8px; } h1 { font-size: 20px; } h2 { font-size: 18px; } h3 { font-size: 16px; } .btn-sm { padding: 8px 12px; font-size: 12px; min-height: 36px; } .stat-value { font-size: 20px; } /* 表格最小宽度滚动 */ table { min-width: 500px; } .table-responsive { margin: 0 -8px; padding: 0 8px; } } /* ==================== 横屏优化 ==================== */ @media (max-width: 767px) and (orientation: landscape) { .mobile-header { height: 48px; } .main-content { padding-top: 56px; } .modal { max-height: 95vh; } } /* ==================== 触摸交互优化 ==================== */ @media (pointer: coarse) { /* 增大触摸目标 */ button, .btn, .nav-link, .menu-item, a { min-height: 44px; min-width: 44px; } /* 增加间距 */ .btn + .btn { margin-left: 8px; } /* 防止误触 */ .btn-icon { padding: 12px; } } /* ==================== 工具类 ==================== */ /* 移动端隐藏 */ @media (min-width: 768px) { .mobile-only { display: none !important; } } /* 桌面端隐藏 */ @media (max-width: 767px) { .desktop-only { display: none !important; } } /* 响应式图片 */ img { max-width: 100%; height: auto; } /* 防止文字选择 */ .no-select { -webkit-user-select: none; user-select: none; } /* 平滑滚动 */ .smooth-scroll { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } /* 安全区域适配（iPhone X 等） */ @supports (padding-top: env(safe-area-inset-top)) { .mobile-header { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); } .main-content { padding-top: calc(68px + env(safe-area-inset-top)); } .modal { padding-bottom: env(safe-area-inset-bottom); } }