/* ============================================================ dxb / www.157110.cn — app.css 第 2 层：移动端布局层（仅 ≤1000px 生效） 引入方式： 版本：v6 2026-09-26 包含四部分： A. 溢出修复（兼容现有模板结构，Stage 1 即可用，零结构改动） A3b 首页菜单恢复 —— 模板 18 主动隐藏了菜单，见该段注释 B. app 外壳（底部 tabbar / 抽屉 / 安全区，Stage 3-4 用） C. 首页图片区「文字化」（≤768px，隐藏首屏 4 张大图，保留标题） D. 底部 tabbar（图标+文字、当前栏目红胶囊高亮，配 tabbar-active.js） E. 首页「最新更新资源」列表间距微调（≤768px，单行保留、彩色保留） F. 列表页 .gm-list-item 标题独占一行（≤768px，最多2行） ⚠️ 实测踩坑记录（改这个文件前先读） 1. 不要改 .container 的 padding / gap。 首页的 .container 是 display:flex 且本来刚好 390px， padding 从 15px 改 12px 就多出 6px → 首页溢出（390 → 397）。 只改 grid-template-columns 是安全的：它对 flex 容器无效。 2. 不要改 .main-content 的 padding，同理。 3. 不要试图用 flex-wrap:wrap 重排首页标题行。 试过把右侧标签组改成 flex:1 1 100% 独占一行，首页炸到 739px （126 个元素溢出）。首页已单独在 Stage 3 处理。 ============================================================ */ @media (max-width:1000px){ /* ===================== A. 溢出修复 ===================== 核心三招：minmax(0,1fr) 替 1fr、子项补 min-width:0、内联 grid 用 !important 覆盖 ====================================================== */ /* A1. 主栅格降为单列。 ⚠️ 原模板写的是 grid-template-columns:1fr —— 1fr = minmax(auto,1fr)，auto 取子项 min-content， 正文一张 1027px 的图就能把轨道撑到 1027 → 媒体查询生效但页面照样横拖。 必须用 minmax(0,1fr)。 */ .container{ grid-template-columns:minmax(0,1fr) !important; } .container > *{ min-width:0 !important; } .main-content, .sidebar{ min-width:0 !important; } /* A2. 顶部导航（模板 47/50 的 .top-nav 结构，窄屏改两行） 原来是单行 flex + nowrap：logo(40px 右边距) + 6 个菜单 gap20 + 搜索框 220px(flex-shrink:0) + 用户区(flex-shrink:0) 固有宽度 >900px → 就是「导航文字互相压字、搜索框压页面」的直接原因。 */ .top-nav, .header{ height:auto !important; min-height:0 !important; } .nav-inner{ flex-wrap:wrap !important; height:auto !important; /* 模板写死 height:65px/60px，换行后内容约 85px 会溢出 sticky 容器 —— 滚动时第二行会脱离 */ min-height:0 !important; padding:var(--sp-2) var(--sp-3) !important; row-gap:var(--sp-2) !important; } .nav-left{ order:1 !important; flex:1 1 auto !important; min-width:0 !important; } .logo{ font-size:20px !important; margin-right:0 !important; } .nav-right, .user-status{ order:2 !important; margin-left:auto !important; flex-shrink:0 !important; font-size:var(--fs-sm) !important; gap:var(--sp-3) !important; } /* 搜索框在手机上是溢出元凶（width:220px + flex-shrink:0）， 隐藏；搜索入口改为放到底部 tabbar 或抽屉里 */ .header-search, .nav-search, .search-wrap{ display:none !important; } /* A3. 菜单改成第二行的横向滑动条 —— 原来 6 个菜单挤一行点不到后半截，现在独享一行 + 可横滑 */ .main-menu, .mid-cate-ul{ order:3 !important; flex:1 1 100% !important; min-width:0 !important; margin:0 !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; white-space:nowrap; padding-bottom:2px; } .main-menu{ gap:var(--sp-4) !important; } .mid-cate-ul{ gap:var(--sp-2) !important; } /* pill 之间 8px，比 16px 紧凑 */ .main-menu::-webkit-scrollbar, .mid-cate-ul::-webkit-scrollbar{ display:none; } .main-menu a{ flex:0 0 auto !important; font-size:var(--fs-md) !important; padding:var(--sp-1) 0 !important; } /* 首页 pill 菜单：li 不收缩，由容器横滑承载。 a 的 padding / 彩色底 / 圆角全部沿用模板的 .nav-c-0~7， 这里【故意不覆盖】—— 模板那条是 .mid-cate-ul li a(0,1,2)， 比 .mid-cate-ul a(0,1,1) 特异性高，覆盖也会失效。 */ .mid-cate-ul li{ flex:0 0 auto !important; min-width:0 !important; } /* A3b. 首页菜单「消失」的真正原因（不是溢出 bug） ------------------------------------------------------------------ 首页模板 18 自己在 @media (max-width:992px) 里写了 .mid-cate-ul { display:none !important } 原注释写着「菜单在平板以下隐藏」。所以首页在手机上从来没有导航条 （DOM 里 li 的宽高实测 = 0x0）。A3 只改了 flex 属性、没碰 display， 所以它照旧被藏。 这里把 display 抢回来，横滑样式复用 A3。 特异性提到 .nav-inner .mid-cate-ul(0,2,0) 高于模板的 .mid-cate-ul(0,1,0)， 不依赖加载顺序。 ⚠️⚠️ 本注释里绝不能出现嵌套的注释符号 —— 第一版就是因为在注释里原样引用了模板那条规则（带成对注释符号）， 外层注释被提前闭合，后面的中文说明变成非法 CSS， 导致整条 .mid-cate-ul{display:flex} 规则被浏览器静默丢弃， 排查花了半小时。CSS 注释不支持嵌套。 ------------------------------------------------------------------ */ .nav-inner .mid-cate-ul, header .mid-cate-ul{ display:flex !important; align-items:center !important; } /* A4. 多列网格降单列（含 flex 子项 min-width:0） */ .file-info-grid, .pay-grid, .related-post-box > div{ grid-template-columns:minmax(0,1fr) !important; } .file-info-grid > *, .pay-grid > *, .related-post-box > *{ min-width:0 !important; } /* A5. 内联 display:grid 的「相关资源推荐」 —— 它是
内联样式媒体查询碰不到，实测两列 544+404=964px 硬撑破页面。 必须用属性选择器 + !important 打掉。 */ .related-post-box [style*="grid-template-columns"]{ grid-template-columns:minmax(0,1fr) !important; } /* A6. 长标题/长链接不许撑破 */ .related-post-box a, .related-post-box a > div, .related-post-box a > span, .list-item, .item-title{ min-width:0 !important; } /* A7. 正文内容 */ .article-body{ font-size:16px; line-height:1.75; } .post-title{ font-size:var(--fs-xl) !important; line-height:1.4; } /* A8. 弹窗 / 登录框（原来宽度写死会把登录注册挤出 21px） */ .modal-content, .account-content{ width:auto !important; max-width:100% !important; margin:10% var(--sp-4) !important; padding:var(--sp-5) var(--sp-4) !important; } /* A9. 页脚在 app 上简化 */ .gm-footer{ margin-top:var(--sp-6) !important; padding:var(--sp-5) var(--sp-4) !important; font-size:var(--fs-sm); } /* ===================== B. app 外壳 ===================== 以下 class 是【新增】的，需要模板配合（Stage 3-4）。 Stage 1 只加 link 时它们不生效，不会造成任何影响。 ====================================================== */ /* B0. 视口安全区变量 */ :root{ --sab: env(safe-area-inset-bottom, 0px); /* 底部手势条 */ --sat: env(safe-area-inset-top, 0px); /* 刘海 */ --tabbar-h: 56px; } /* B1. 顶部固定标题栏 —— 用 sticky 而不是 fixed：fixed 需要 JS 补 padding，且滚动时易抖动 */ .app-header, .dx-header{ position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:var(--sp-3); height:var(--header-h); padding:var(--sat) var(--sp-3) 0; background:#fff; border-bottom:1px solid var(--c-line); } .app-header__title, .dx-header__title{ flex:1 1 auto; min-width:0; font-size:var(--fs-lg); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; } .app-header__btn, .dx-header__btn{ flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-md); color:var(--c-text); } .app-header__btn:active, .dx-header__btn:active{ background:var(--c-bg-sub); } /* B2. 底部 tab bar —— fixed 固定，body 补等高 padding-bottom（含安全区） */ .app-tabbar, .dx-tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:100; display:flex; height:calc(var(--tabbar-h) + var(--sab)); padding-bottom:var(--sab); background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(10px); border-top:1px solid var(--c-line); } .app-tabbar__item, .dx-tabbar__item{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:var(--fs-xs); color:var(--c-text-3); } .app-tabbar__item.is-active, .dx-tabbar__item.is-active{ color:var(--c-primary); } .app-tabbar__item svg, .dx-tabbar__item svg{ width:22px; height:22px; } body.has-tabbar{ padding-bottom:calc(var(--tabbar-h) + var(--sab)); } /* B3. 抽屉菜单（取代「6 个菜单挤一行」） */ .app-drawer, .dx-drawer{ position:fixed; top:0; bottom:0; left:0; z-index:200; width:76%; max-width:300px; background:#fff; transform:translateX(-100%); transition:transform .25s ease; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:var(--sp-4); } .app-drawer.is-open, .dx-drawer.is-open{ transform:translateX(0); } .app-drawer a, .dx-drawer a{ display:block; padding:var(--sp-3) 0; border-bottom:1px solid var(--c-line); font-size:var(--fs-base); } .app-mask, .dx-mask{ position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:opacity .25s; } .app-mask.is-open, .dx-mask.is-open{ opacity:1; visibility:visible; } /* B4. 列表卡片化（新增类名，替代现有密排行） */ .dx-list-item{ display:block; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:var(--sp-4); margin-bottom:var(--sp-3); } .dx-list-item:active{ background:var(--c-bg-sub); } /* B5. 正文操作条（字号 A−/A+、点赞、分享） */ .dx-actionbar{ position:fixed; left:0; right:0; bottom:calc(var(--tabbar-h) + var(--sab)); z-index:99; display:flex; align-items:center; justify-content:space-around; height:48px; background:#fff; border-top:1px solid var(--c-line); } } /* ---------- 只有手机才需要：防止 iOS 输入框聚焦时自动放大 ---------- 注意：这里故意不用 user-scalable=no （站点有 A−/A+ 字号控件，禁用缩放会和它冲突）。 做法是保证输入框字号 ≥16px。 */ @media (max-width:1000px){ input, select, textarea{ font-size:16px; } } /* ============================================================ C. 首页首屏卡片区（.feature-grid，≤768px） ------------------------------------------------------------ 位置：顶部「短线吧 / 登录 注册」之下、「最新更新资源」之上。 内容是 4 张卡片（大图 228px + 3 张 110px）， 手机端实测合计 635px 高，占掉大半个首屏。 当前状态：整块隐藏（C1）。 C2~C4 是「白底文字卡（去图留标题）」形态的备用样式， 删掉 C1 那一行即自动生效 —— 两档开关见 C1 注释。 断点 768px 与模板自身 feature 断点一致， 768~1000px（平板）保留原来的 2fr:1fr 图片布局。 ============================================================ */ @media (max-width:768px){ /* C1. ★整块隐藏首页首屏这 4 张卡片（2026-09-25 按用户要求） ------------------------------------------------------------------ 位置：顶部「短线吧 / 登录 注册」之下、「最新更新资源」之上。 桌面端(>768px)不动。 【怎么改回来】 · 想要「白底文字卡」形态（去图留标题）： 删掉下面这一行 display:none，C2~C4 会自动接管。 · 想要最初的样子（图 + 图上蒙层标题）： 再删掉 C4 里的 .feature-item img{ display:none } 即可。 ------------------------------------------------------------------ */ .feature-grid{ display:none !important; } /* C2. 栅格：两列 248px 定高 → 单列自适应（删掉 C1 后才生效） */ .feature-grid{ grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto !important; height:auto !important; gap:var(--sp-2) !important; margin-bottom:var(--sp-4) !important; } /* C2. 卡片外观：深色底(#222) → 白底 + 左侧主色条（更像 app 列表项） */ .feature-item{ background:var(--c-bg) !important; border:1px solid var(--c-line); border-left:3px solid var(--c-primary); border-radius:var(--r-md); } /* C3. ★隐藏配图★ —— 这一行就是「隐藏首页图片」的总开关 */ .feature-item img{ display:none !important; } /* C4. 原图上的渐变标题遮罩 → 正常文字块 */ .feature-info{ position:static !important; background:none !important; color:var(--c-text) !important; padding:var(--sp-3) !important; width:auto !important; } .feature-info h2{ margin:0 !important; font-size:var(--fs-md) !important; line-height:1.5 !important; color:var(--c-text) !important; /* 原来为了压在图上写了 nowrap + 省略号，现在放开成两行截断 */ white-space:normal !important; overflow:hidden !important; text-overflow:clip !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } } /* ============================================================ D. 底部 tab bar：把顶部那条栏目菜单整体移到屏幕底部（≤768px） ------------------------------------------------------------ 做法：直接复用现有菜单 DOM，零 HTML 改动、零 JS。 菜单一旦 position:fixed 到底部，就自动脱离顶部导航流， 顶部那一行只剩 logo + 登录/注册（即「顶部那块自动消失」）。 站内有【两套】菜单结构，都要认： 首页 / 列表页 :