/* ============================================================================= * responsive-detail.css —— 详情页：标题区 / 正文 / 留言表单 / 帖子页 / 相关资讯 * * ★ 本文件由 `responsive.css` 拆分而来（2026-09-26），**声明值一字未改**， * 只做了「按归属分文件 + 按断点排序 + 章节重编号」。 * 拆分前的单文件版备份在 `responsive.css.bak`，回滚见该文件头。 * * ★ 断点顺序（全站 4 档，各文件内部顺序一致）： * ≤1199px 小桌面 / 横屏平板 * ≤991px 平板竖屏 * ≤767px 手机 * ≤479px 小屏手机 * * ⚠ 权重：选择器必须 ≥ 原站同名规则。同权重靠后加载即胜出，**尽量不写 * 强制声明（`!` + `important`）**。会被原站更高特异性规则压掉的，必须带上 * 与原站相同的祖先前缀（约定 40 / 41）。 * ========================================================================== */ /* =========================================================================== * ≤991px —— 平板竖屏 —— 侧栏下沉，导航变抽屉，列表降列 * ========================================================================= */ @media (max-width:991px){ /* ---- 1. 详情页头部元信息换行 ---- */ .Infobase{ display:flex; flex-wrap:wrap; gap:var(--aa-s2); } .Infobase .infos{ flex:1 1 100%; } /* ---- 2. 论坛帖子页留言框底部「承诺遵守…」+ 发表按钮 ---- 原站 `modules/bbs/pc/listb.css`： #postcomment .cont .subcont{ height:45px; line-height:45px; position:relative; padding:20px 140px 0 10px; } #postcomment .cont .subcont .word{ text-align:right; font-size:14px; } #postcomment .cont .subcont .postsub{ width:130px; height:45px; position:absolute; right:0; top:20px; } 两个坑叠在一起：① `padding-right:140px` 是给绝对定位的按钮让位， 窄屏下 `.word` 只剩约 160px，16 个字要折成 2 行； ② 但 `height:45px` 配 `line-height:45px` —— **折行后每行仍然占 45px**， 2 行就是 90px，被固定高度裁掉（实测裁掉 30px）。 → 窄屏把按钮改回普通流（全宽更好点），`subcont` 高度自适应、行高改正常值。 */ #postcomment .cont .subcont{ height:auto; line-height:1.6; padding:var(--aa-s3) var(--aa-s3) 0; } #postcomment .cont .subcont .word{ text-align:left; margin-bottom:var(--aa-s2); } #postcomment .cont .subcont .postsub{ position:static; right:auto; top:auto; width:auto; max-width:220px; height:auto; min-height:var(--aa-tap); line-height:var(--aa-tap); } } /* =========================================================================== * ≤767px —— 手机 —— 单列 + 卡片化（用户优先级最高的一档） * ========================================================================= */ @media (max-width:767px){ /* ---- 1. 全局字号下探一档，正文更好读 ---- */ body{ font-size:var(--aa-f-md); } /* ---- 2. 详情页 ---- */ .Infotitle{ font-size:var(--aa-f-2xl); line-height:1.35; } .InfoContent{ font-size:var(--aa-f-lg); line-height:1.8; } .InfoContent img{ height:auto; } .BencandyCont{ margin-top:var(--aa-s3); } /* ---- 3. 表单：字号 ≥16px 防 iOS 聚焦缩放，按钮全宽 ---- */ .PostComment input[type="text"], .PostComment input[type="email"], .PostComment input[type="url"], .PostComment textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea, .Logo_Search .search .keyword input{ font-size:var(--aa-f-lg); min-height:var(--aa-tap); box-sizing:border-box; } .PostComment textarea, .comment-form textarea{ min-height:120px; } .PostComment .sub input, .PostComment #comment_submit, .comment-form .submit input[type="submit"], .form-submit input[type="submit"]{ width:100%; height:var(--aa-tap); line-height:var(--aa-tap); font-size:var(--aa-f-lg); } /* ---- 4. 详情页留言表单：`dl` 的 table 布局改成纵向堆叠 ---- 原站（`assets/modules/news/pc/bencandy.css`）： .PostComment dl{ display:table; width:100%; } .PostComment dl dt, .PostComment dl dd{ display:table-cell; padding:5px; } .PostComment dl dd textarea{ width:400px; height:150px; } ← 写死 400px 固定 400px 的 textarea 决定了 `dd` 的宽度 → 整张「表格」min-content 437px， 比 `.Main`(353px) 宽 **85px** → 被 `.Main{overflow:hidden}` 裁掉。 ★ 为什么通用兜底的 `max-width:100%` 救不了： `max-width` **对 `display:table` 的元素无效** —— 表格的 min-content 宽度优先于 max-width（表格是「内容驱动」的）。 必须先把 `dl`/`dd` 从 table/table-cell 改成 block，它才会认 max-width。 ⚠ 约定 12：`comment_form()` 有两层外壳，最后一步选择器用 `>` 避免误伤后代。 */ .PostComment dl, .comment-form dl{ display:block; width:auto; } .PostComment dl > dt, .PostComment dl > dd, .comment-form dl > dt, .comment-form dl > dd{ display:block; width:auto; text-align:left; padding:0 0 var(--aa-s2); } .PostComment dl > dd textarea, .comment-form dl > dd textarea, .PostComment dl > dd input[type="text"], .PostComment dl > dd input[type="email"], .PostComment dl > dd input[type="url"], .comment-form dl > dd input[type="text"], .comment-form dl > dd input[type="email"], .comment-form dl > dd input[type="url"]{ width:100%; } /* ---- 5. 详情页「最新资讯」区块（`.NewestCont .list1`）---- 原站版式 = 250px 缩略图 + 右侧文字的两栏卡片，底下一行「浏览量 / 发布时间」 靠 `position:absolute; bottom:15px` 压在卡片底部。窄屏时两处一起崩： · `dl` 是 `display:table`，`dt{width:250px}` 吃掉容器大半 → 320px 下 `dd` 只剩 **31px**，标题「湘潭传承画馆」竖排成一列； · `span{padding-left:265px}` 是给 250px 缩略图让位的硬编码 → 文字右沿到 332px，被 `.Main{overflow:hidden}` 切掉 32px（截图里「浏览量」只剩半个字）； · 绝对定位的 30px 高的 meta 条装不下折行的 span（90px）→ 溢出压住下面的 `.list2` 链接。 → 缩略图改按比例（38%），meta 条放回文档流并改 flex 两端对齐。 */ .NewestCont .list1 dl dt{ width:38%; height:auto; } .NewestCont .list1 dl dt img{ max-width:100%; max-height:none; height:auto; } .NewestCont .list1 div{ position:static; height:auto; line-height:1.8; margin-top:var(--aa-s2); display:flex; flex-wrap:wrap; justify-content:space-between; column-gap:var(--aa-s2); } .NewestCont .list1 div span, .NewestCont .list1 div em{ float:none; } .NewestCont .list1 div span{ padding-left:0; } } /* =========================================================================== * ≤479px —— 小屏手机 —— 再收一档 * ========================================================================= */ @media (max-width:479px){ /* ---- 1. bbs 帖子页：楼主资料表（`.ContentInfo table.InfoTable`）---- `listb.css` 的 `.InfoTable .member{width:130px}` + 发帖时间那行 「注册：2023-05-09」不可断行 → 整表的 min-content = 313px， 而 `.Main` 在 320px 下只有 302px。`display:table` 的 min-content **优先于** `max-width:100%`（约定 33）→ 表右沿 324px，被切 12px。 → 两列拍成一列：资料卡改成「头像 + 昵称/组别/时间」的 flex 行，正文拿到满宽。 ⚠ 只用 `.ContentInfo` 收口（该类只出现在 `template-parts/single-bbs.php`）， 不要波及 shop 详情页那套同名 `.InfoTable`。 */ .ContentInfo table.InfoTable, .ContentInfo table.InfoTable tbody, .ContentInfo table.InfoTable tr, .ContentInfo table.InfoTable td{ display:block; width:auto; } .ContentInfo table.InfoTable .member{ display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--aa-s2); row-gap:2px; padding:var(--aa-s3) 0; } .ContentInfo table.InfoTable .member .landlord{ display:none; } .ContentInfo table.InfoTable .member .icon{ flex:0 0 auto; margin:0; width:56px; height:56px; } .ContentInfo table.InfoTable .member .icon a{ width:56px; height:56px; line-height:52px; } .ContentInfo table.InfoTable .member .icon a img{ max-width:100%; max-height:100%; } .ContentInfo table.InfoTable .member .username{ padding:0; text-align:left; line-height:1.5; } .ContentInfo table.InfoTable .member .grouptitle{ margin:0; } .ContentInfo table.InfoTable .member .time{ padding-left:0; } }