/* =================================================================== responsive.css —— 远卓AI+ 全站移动端自适应「安全网」 通过根相对路径 /responsive.css 被所有线上页面引入（位于 最前， 所以页面自带的内联样式可覆盖本文件，本文件只填补页面未处理的缺口）。 目标：消除手机端横向滚动、内容溢出、超宽表格撑破页面、超大字号顶满屏宽等问题。 说明：本文件不改动桌面端布局；所有移动规则都包在媒体查询内。 =================================================================== */ /* ---------- 基础全局（对所有屏幕生效，均无害） ---------- */ *, *::before, *::after { box-sizing: border-box; } img, video, canvas, svg, iframe { max-width: 100%; height: auto; } input, select, textarea { max-width: 100%; } p, li, td, th, div { overflow-wrap: break-word; word-wrap: break-word; } /* 超宽内容（表格、代码块）放进滚动容器时，横向滚动而非撑破页面 */ .table-responsive, .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------- 平板及以下：≤ 820px ---------- */ @media (max-width: 820px) { /* 常见容器：铺满视口并保留左右安全边距（!important 仅用于覆盖页面写死的最大宽度） */ .container, .container-fluid, .page, .wrap, .wrapper, .inner, .content, .main, .layout, .app, .panel, .section, .box, .shell, .body-inner, .wrapper-inner, .container-inner { max-width: 100% !important; width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; } /* 顶部导航 / 头部横向空间不足时换行，避免被挤压或溢出 */ .topbar .nav-inner, nav, .nav, .navbar, .top, .header, .site-header, .nav-inner, .top-inner { flex-wrap: wrap !important; } nav, .nav { gap: 14px !important; } /* 多列网格在手机上折叠为单列，卡片/功能块更好点 */ .grid, .cards, .card-grid { grid-template-columns: 1fr !important; } /* 按钮组、操作区换行，按钮在窄屏占满 */ .hero-buttons, .actions, .btn-group, .toolbar, .ops, .op-bar { flex-wrap: wrap !important; } .hero-buttons a, .actions a, .btn, .button, button { font-size: 15px; } .hero-buttons a, .actions a, .btn.block, .button.block { width: 100%; max-width: 100%; } /* 大标题缩放，避免顶满屏宽 */ h1 { font-size: clamp(22px, 7vw, 34px) !important; line-height: 1.25 !important; } h2 { font-size: clamp(19px, 5.5vw, 26px) !important; } h3 { font-size: clamp(17px, 4.6vw, 22px) !important; } /* 顶部 sticky 导航在手机上不占太多高度 */ .topbar, .navbar, .site-header { position: static; } /* 超宽表格（后台报告等）在平/手机上横向滚动，而非撑破页面 */ table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ---------- 手机小屏：≤ 560px ---------- */ @media (max-width: 560px) { /* 统计数字横向排列，最多两列 */ .stats, .stat-grid, .stat-row { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; } /* 卡片 / 面板内边距收紧 */ .card, .panel, .box { padding: 18px !important; border-radius: 18px !important; } /* 表单行竖排，输入框占满 */ .form-row, .field-row, .row { flex-direction: column !important; align-items: stretch !important; } .form-row > *, .field-row > * { width: 100% !important; } /* 页脚 / 联系区小屏单列 */ .footer-cols, .footer-grid, .contact-grid { grid-template-columns: 1fr !important; } }