/* ========================================================= 元卜八字 · 全站 H5 自适应补丁 (responsive) ------------------------------------------------------------ 背景：style.css / member.css 是冻结文件，且原 768/900/1080px 媒体查询对新版 site-nav / hepan (Tailwind) / member SPA / 后台 admin 覆盖不全。本文件作为补充层，在不修改冻结 CSS 的前提下 覆盖所有页面的窄屏适配问题。 ------------------------------------------------------------ 链接：所有页面 内追加 ========================================================= */ /* ==================== 通用兜底 ==================== */ /* 防止任意子元素意外撑爆整页；只对非 sticky 区域生效 */ body > *:not(.site-nav):not(.site-footer) { min-width: 0; } /* ==================== ≤ 860px（平板/手机） ==================== */ @media (max-width: 860px) { /* ---------- site-nav 收窄 ---------- */ .site-nav-inner { padding: 0 12px; gap: 8px; height: 52px; } .site-brand { font-size: 15px; gap: 7px; } .site-burger { font-size: 20px; padding: 0 4px; } /* ---------- 通用：app-container 留白 ---------- */ .app-container { padding: 0 10px 32px !important; } /* ---------- 表单：所有行式输入自动换行 ---------- */ .datetime-row, .options-row, .city-row, .form-row, .mem-row2, .mem-toolbar { flex-wrap: wrap !important; } .datetime-row > *, .options-row > *, .city-row > *, .form-row > * { flex: 1 1 calc(50% - 6px); min-width: 0; } .form-input, .form-select { width: 100%; max-width: 100%; } .form-card { padding: 16px 14px !important; } .form-card .tabs-row { flex-direction: column; gap: 8px; align-items: stretch; } .gender-radio, .cal-tab { flex: 1; text-align: center; } /* ---------- 主页（index）双栏 → 单栏 ---------- */ .main-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } .right-col { position: static !important; } .huangli-panel { padding: 14px !important; } .hl-day { font-size: 48px !important; } .ad-banner { min-height: 80px; } /* ---------- 排盘页（paipan, Tailwind） ---------- */ /* paipan.html 用 Tailwind 工具类布局：w-24 aside + grid-cols-X */ /* 860px 以下收起左 aside，强制单列 */ aside.w-24, aside[class*="w-24"] { display: none !important; } [class*="grid-cols-"] { grid-template-columns: 1fr !important; } /* 主容器收紧 */ .max-w-\[1200px\], .max-w-\[1100px\], .max-w-\[1000px\] { max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; } /* ---------- 专业细盘（xipan）侧边栏收起 ---------- xipan.html 用内联 CSS 把 .sidebar-nav 设成 position:static + flex 200px， 所以这里必须 display:none 才能释放 flex 槽位（单纯 transform 不够）。 */ .sidebar-nav { display: none !important; } .app-shell { flex-direction: column !important; } .main-content { margin-left: 0 !important; padding: 0 10px 20px !important; } .page-header { margin: 0 -10px 14px !important; padding: 0 12px !important; flex-wrap: wrap; height: auto !important; min-height: 60px; } .content-grid { grid-template-columns: 1fr !important; } /* xipan 命盘表（7+ 列，宽度 600+px）：让 result-area 横向滚动 */ .result-area { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .bazi-table { min-width: 480px; } /* ---------- 命盘表：横向滚动（不被视口裁切） ---------- */ .bazi-table { min-width: 360px; } .bazi-wrap, .chart-wrap, [class*="bazi-wrap"] { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------- 合盘页（hepan, Tailwind）按钮铺满 ---------- */ button.gold-btn, button.ghost-btn, .gold-btn, .ghost-btn { max-width: 100%; } #btnHepan, #btnSave, #btnAI { width: 100%; } /* hepan 表单卡片：内嵌"拉取我的存档"按钮可能贴边溢出，收紧 */ .hepan-card, [class*="hepan-card"] { position: relative; } /* hepan 表单内 grid 强制单列（避免 2 列字段太挤） */ .grid.grid-cols-1, .grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-4 { grid-template-columns: 1fr !important; } /* hepan 甲/乙 header 内的 ghost-btn 太挤就缩小字号 */ .flex.items-center.justify-between button { font-size: 11px; padding: 5px 8px; } /* 移动端 input/select 不被 flex 父级压缩 */ input.form-input, select.form-select { min-width: 0; } /* ---------- 藏书阁（book）网格 2/3 列 → 1 列 ---------- */ .grid, [class*="grid-cols"] { grid-template-columns: 1fr !important; } .topbar { padding: 10px 12px !important; flex-wrap: wrap; gap: 8px; height: auto !important; } .topbar .search, .search { flex: 1 1 100%; min-width: 0; } .topbar .search input, .search input { width: 100%; } /* ---------- 会员中心（member）侧栏 → 顶部 ---------- 关键：必须把 .mem-layout 的 grid 改成单列，否则 220px 侧栏 + 1fr 主区会让 .mem-main 在 375px 下只有 155px，撑爆整个表单。 */ .mem-layout { display: block !important; grid-template-columns: 1fr !important; } .mem-aside, .mem-sidebar, aside.mem-aside { position: static !important; width: 100% !important; height: auto !important; border-right: 0 !important; border-bottom: 1px solid var(--border, #2d3548); padding: 8px 12px !important; } .mem-main { margin-left: 0 !important; padding: 12px !important; min-width: 0 !important; width: 100% !important; } /* 移动端 form-card 取消 max-width 限制，避免它撑破 .mem-main */ .form-card { max-width: 100% !important; box-sizing: border-box !important; } .mem-tab-list, .mem-nav { display: flex; flex-wrap: wrap; gap: 6px; } /* 登录页 tab 按钮（main-tabs / main-tab）允许换行，每项铺满 */ .main-tabs { flex-wrap: wrap !important; width: 100% !important; box-sizing: border-box !important; } .main-tab { flex: 1 1 0 !important; min-width: 0 !important; width: calc(50% - 3px) !important; text-align: center; padding: 9px 8px !important; font-size: 14px !important; } /* 兼容旧 tab-group 写法 */ .mem-tabs, .tab-group, [class*="login-tabs"] { flex-wrap: wrap; gap: 8px; } .tab-group > * { flex: 1 1 calc(50% - 4px); min-width: 0; text-align: center; } /* ---------- 后台 admin：表格横向滚动 ---------- */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; white-space: nowrap; } .toolbar { flex-wrap: wrap; gap: 6px; } .tabs { flex-wrap: wrap; } .tabs button { padding: 6px 10px; font-size: 13px; } /* admin 顶部 .top 不动，但容器收紧 */ .top { padding: 0 12px !important; } /* admin 登录页表单卡片不超宽（admin 用 .login 容器，非 .login-card） */ .login { max-width: 100% !important; box-sizing: border-box !important; margin: 8vh auto 0 !important; } .login .field input, .login .field textarea, .login .field select, .login button { width: 100% !important; } /* admin 看板内的双列网格（.grid2 内联 grid-template-columns:1fr 1fr）→ 单列 */ .grid2 { grid-template-columns: 1fr !important; } /* ---------- 阅读器（reader）：左侧目录 + 右侧正文的两栏 → 单栏 ---------- */ /* reader.html 用 .layout(flex) > .sidebar(目录) + .reader(正文) */ .layout { display: block !important; min-height: 0 !important; } .sidebar { display: none !important; } /* 目录在移动端收起 */ .reader { width: 100% !important; padding: 16px 12px 60px !important; } /* 顶部工具栏按钮：允许换行、缩小字号 */ .topbar .ctrl { flex-wrap: wrap; } .tbtn { font-size: 12px !important; padding: 5px 10px !important; } } /* ==================== ≤ 600px（小屏手机） ==================== */ @media (max-width: 600px) { body { font-size: 14px; } /* 站点 logo 只保留金色圆形，文字"元卜八字"可隐藏以省空间 */ .site-brand span:not(.mark) { display: none; } .form-card { padding: 14px 12px !important; } .hl-day { font-size: 40px !important; } .form-input, .form-select { height: 40px; font-size: 14px; } button.gold-btn, button.ghost-btn, .gold-btn, .ghost-btn { padding: 10px 14px; font-size: 14px; } .tabs-row .tab-group { flex-wrap: wrap; } /* 黄历面板内字体收紧 */ .hl-shengxiao, .hl-xingzuo, .hl-gz-line { font-size: 12px !important; } .hl-yiji-text { font-size: 12px !important; } /* 命盘单元字号 */ .bazi-cell.gan-cell, .bazi-cell.zhi-cell { font-size: 18px !important; } /* 页脚列 */ .site-footer-col { flex: 1 1 calc(50% - 18px); min-width: 0; } } /* ==================== ≤ 380px（iPhone SE 等极小屏） ==================== */ @media (max-width: 380px) { .form-card { padding: 12px 10px !important; } .datetime-row > *, .options-row > * { flex: 1 1 100%; } .hl-day { font-size: 36px !important; } .site-nav-inner { padding: 0 10px; } .site-brand .mark { width: 24px; height: 24px; font-size: 13px; } .site-burger { font-size: 18px; } /* 表单 select 横向排开 4 个不再够宽，全部单列 */ .datetime-row .form-select { min-width: 0; } }