/* ============================================================================= * responsive-modules.css —— 模块首页：主栅格 / 图文网格 / 侧栏面板 / 页脚之外的分栏 * * ★ 本文件由 `responsive.css` 拆分而来（2026-09-26），**声明值一字未改**， * 只做了「按归属分文件 + 按断点排序 + 章节重编号」。 * 拆分前的单文件版备份在 `responsive.css.bak`，回滚见该文件头。 * * ★ 断点顺序（全站 4 档，各文件内部顺序一致）： * ≤1199px 小桌面 / 横屏平板 * ≤991px 平板竖屏 * ≤767px 手机 * ≤479px 小屏手机 * * ⚠ 权重：选择器必须 ≥ 原站同名规则。同权重靠后加载即胜出，**尽量不写 * 强制声明（`!` + `important`）**。会被原站更高特异性规则压掉的，必须带上 * 与原站相同的祖先前缀（约定 40 / 41）。 * ========================================================================== */ /* =========================================================================== * 0. 「首页展开更多」按钮：桌面档不存在 * * ★ 必须**在媒体查询之外**打底 `display:none`。 * 原因（实测踩到）：nav.js 是**无条件**给栅格插按钮的（它只在条目数 >12 时 * 才插，但插的时候不看视口）—— 于是桌面档也多了 4 个按钮， * 首页桌面锚点 **5086 → 5170**。 * 放在媒体查询外打底，手机档再放开，桌面就天然没有它们。 * （媒体查询本身不提供权重，能赢只因为这条在本文件里更靠前 + 前缀相同。） * ========================================================================= */ .main_box .aa-fold-btn{ display:none; } /* =========================================================================== * ≤991px —— 平板竖屏 —— 侧栏下沉，导航变抽屉，列表降列 * ========================================================================= */ @media (max-width:991px){ /* ---- 1. 栅格：侧栏下沉，全部单列 ---- */ .BencandyCont .Main, .BencandyCont .Side, .MainCont1 .Left, .MainCont1 .Right{ display:block; float:none; width:auto; } .BencandyCont .Side, .MainCont1 .Right{ margin-top:var(--aa-s5); } .MainCont1{ display:block; } /* 首页左栏 / 右栏 */ .content_first{ display:block; } /* ★★ 选择器**必须带 `.main_box`**，否则这两条会被原站静默压掉。 原站 `index.css`： .main_box .content_first .content_left { float:left; width:681px; } .main_box .content_first .content_right{ float:right; width:492px; } 两条都是 **(0,3,0)**，而 `.content_first .content_left` 只有 **(0,2,0)** → `float:none; width:auto` **从来没生效过**（2026-09-25 用 `diag_shadowed.py` 才查出来）。 ⚠ 之前一直没暴露，是**两个巧合叠出来的**： ① `.content_first{overflow:hidden}` 建了 BFC，兜住了浮动； ② 8 层兜底的 `max-width:100%` 把 681/492 都夹到了容器宽。 但 768px 视口下 `.wrap` 内容盒是 736px，`max-width:100%` 不再夹， 两栏会变成 **681 / 492 两个不同宽度**（那是原站给 1200px 量身的尺寸）。 同权重 + 我们后加载 → 才真正生效。 ⚠ 下面那条 `newestlist` 的注释说「上面把 `.content_right` 拍成满宽后…」—— 那是**当时基于错误前提写下的**：它其实是被 `max-width` 夹宽的。 结论仍然成立（收窄会折行、定高会裁），故保留。 */ .main_box .content_first .content_left, .main_box .content_first .content_right{ float:none; width:auto; } /* ★ 右栏「最新资讯」列表：原站 `.newestlist{height:30px; overflow:hidden; font:15px/30px}` 是**在 492px 定宽下「标题 + 时间正好一行」**的写法。 上面把 `.content_right` 拍成满宽后，492px 的 `.newest` 被 8 层兜底的 `max-width:100%` 压到 373px（390 视口）→ 标题折成两行（60px） → 被 30px 的 `overflow:hidden` **纵向裁掉 30px**。 实测：390 视口 8 条、360 视口 11 条「文字被裁」（断言 7 抓到的）。 → 高度自适应 + 时间不再右浮动（改行内，跟着标题自然换行）。 ⚠ 这是**横向修复的连带副作用** —— 横向收窄必然让文本重新折行， 所以凡是「原站用定宽保证单行 + 定高 + overflow:hidden」的地方， 收窄后都要一并把高度放开。`diag_hclip_all` 只查横向，查不到这类。 */ .content_first .content_right .newest_box .newest .newestlist{ height:auto; min-height:30px; overflow:visible; } .content_first .content_right .newest_box .newest .newestlist span.date{ float:none; margin-left:var(--aa-s2); } /* ---- 2. 侧栏两个面板横排成两栏，省纵向空间 ---- */ .BencandyCont .Side{ display:flex; flex-wrap:wrap; gap:var(--aa-s4); } .BencandyCont .Side .sidecont{ flex:1 1 calc(50% - var(--aa-s2)); min-width:260px; } /* ---- 3. 首页图文网格（.topstories / .topstories1 / .topstories2）6 列 → 2 列。 ★ 原站把尺寸全写在 inline style 里：

content-box 下图片实渲宽度 = 185 + 2×18 = **221px**，比外层 （185px） 还宽 36px。桌面 6 列时 td≈192px 勉强容忍（原站本来就这样，属于既有瑕疵）， 但手机上 td 只剩 ~58px，18 张图会互相压成一团。 → 改 2 列弹性网格，图片跟随格子。内联样式只能用 !important 覆盖。 （`:is()` 需要 Chrome 88+ / Safari 14+；旧浏览器会整条忽略， 退化成未现代化的版式，不会更糟。） */ .main_box :is(.topstories, .topstories1, .topstories2) > table, .main_box :is(.topstories, .topstories1, .topstories2) > table > tbody{ display:block; width:auto; } .main_box :is(.topstories, .topstories1, .topstories2) > table > tbody > tr{ display:flex; flex-wrap:wrap; } .main_box :is(.topstories, .topstories1, .topstories2) > table > tbody > tr > td{ display:block; width:auto; flex:1 1 50%; max-width:50%; box-sizing:border-box; padding:var(--aa-s2); } .main_box :is(.topstories, .topstories1, .topstories2) td > div{ float:none !important; margin:0 !important; } .main_box :is(.topstories, .topstories1, .topstories2) td p.img{ margin:0 !important; padding:0 !important; } .main_box :is(.topstories, .topstories1, .topstories2) td p.img > a{ display:block; width:auto !important; height:auto !important; } .main_box :is(.topstories, .topstories1, .topstories2) td p.img img{ display:block; width:100% !important; height:auto !important; padding:0 !important; border-radius:var(--aa-r-sm); } .main_box :is(.topstories, .topstories1, .topstories2) td p.title{ margin-top:var(--aa-s2) !important; } .main_box :is(.topstories, .topstories1, .topstories2) td p.title > a{ font-size:var(--aa-f-sm) !important; line-height:1.5 !important; } /* ---- 4. 「书画画家」右栏 6 列肖像网格 → 2 列。 结构同 3b（`` + inline 140×100 图）， 但外层 div 是 `float:right`、`p.img` 还带 `margin-right:-10px`。 */ .main_box .supermarket_right > table, .main_box .supermarket_right > table > tbody{ display:block; width:auto; } .main_box .supermarket_right > table > tbody > tr{ display:flex; flex-wrap:wrap; } .main_box .supermarket_right > table > tbody > tr > td{ display:block; width:auto; flex:1 1 50%; max-width:50%; box-sizing:border-box; padding:var(--aa-s2) 0; } .main_box .supermarket_right td > div{ float:none !important; margin:0 !important; } .main_box .supermarket_right td p.img{ margin-right:0 !important; padding:0 !important; } .main_box .supermarket_right td p.img > a{ display:block; width:auto !important; height:auto !important; border:0 !important; } .main_box .supermarket_right td p.img img{ display:block; width:100% !important; height:auto !important; border:0 !important; border-radius:var(--aa-r-sm); } .main_box .supermarket_right td p.title{ margin-top:var(--aa-s2) !important; } .main_box .supermarket_right td p.title > a{ font-size:var(--aa-f-sm) !important; line-height:1.5 !important; } /* ---- 5. 百度分享图标（22×25，差 2px 不到门槛）---- 注：`#bdshare` 由站外 bdshare.js 填充，本站 DNS 被拦时不会加载， 真实浏览器里尺寸也可能不同 —— 这里只是兜住下限。 */ .baidu_share #bdshare a{ display:inline-block; min-width:24px; min-height:24px; } /* ---- 6. 礼品页（/gift/）整块版式是 895px 定宽 + 负边距 hack ---- `.content_text_right{width:895px; margin-left:20px; margin-top:-445px}` 靠**负的上边距**把右栏拉到左栏旁边（PC 双栏 hack），窄屏必须把这两个 值一起清掉 —— 只清 width 不清 margin，右边界还是会顶出去 10px。 里面 `.text_title span`(631) / `.title_nav`(264) / `.Showlist_box`(895) / `.listpic`(280 + 13 左边距) 全是写死宽度，逐条放开。 */ .content_text_left, .content_text_right{ float:none; width:auto; max-width:100%; margin-left:0; margin-top:0; } .content_text_right{ margin-top:var(--aa-s5); } .content_text_right .text_title{ float:none; width:auto; max-width:100%; height:auto; line-height:1.6; padding:var(--aa-s2) 0; } .content_text_right .text_title > span{ float:none; display:block; width:auto; max-width:100%; height:auto; line-height:1.6; } .content_text_right .title_nav{ float:none; display:flex; flex-wrap:wrap; width:auto; max-width:100%; height:auto; } .content_text_right .title_nav a{ float:none; flex:0 0 auto; min-width:var(--aa-tap); min-height:var(--aa-tap); line-height:var(--aa-tap); margin:0 var(--aa-s2) var(--aa-s2) 0; } .content_text_right .Showlist_box{ float:none; width:auto; max-width:100%; } .content_text_right .listpic{ float:none; width:auto; max-width:100%; margin:0 0 var(--aa-s4) 0; } .content_text_right .listpic .img, .content_text_right .listpic .title, .content_text_right .listpic > div{ float:none; width:auto; max-width:100%; box-sizing:border-box; } .content_text_right .listpic .img{ height:auto; padding:var(--aa-s1); } .content_text_right .listpic .img img{ width:100%; height:auto; } .content_text_right .listpic .title{ height:auto; line-height:1.5; margin:var(--aa-s2) 0; overflow:visible; } .content_text_right .listpic > div{ height:auto; line-height:2; padding:0 var(--aa-s2); } /* ---- 7. 触控目标补足（阶段 3d）—— 只做「按钮状」链接 ---- * * 背景：`check_responsive.py` 只硬卡 WCAG 2.5.8 的底线 **24px** * （低于才判失败），24~44 的落在 `smallSoft` **提示项**里，从不判失败。 * 实测移动端（320/390/360/768）24~44px 的条目共 **412 条 / 72 条路径**， * 其中 <32px 的有 **136 条 / 39 条路径**。 * * ★ 为什么不「全部补到 44」—— 这是有意的取舍，不是没做完： * · **列表里的标题链接**（`ul.listHot li > a`、`li.list1 dl dd h3 > a` * 等）是**行内文本链接**，WCAG 2.5.8 明确豁免（inline exception）， * 且它们现在是 25px 行高、一行一条；强行抬到 44px 会让 * 「20 条的热榜」从 500px 涨到 880px —— 把阶段 3c 省下来的 * 纵向空间又还回去，**得不偿失**。 * · **真正该补的是「看起来像按钮」的那些**：它们有边框/底色/圆角， * 用户会当成按钮去点，25px 高在手机上明显够不着。本节只做这些。 * * ★ 两个必须同时改的东西（否则改了也没用，甚至更糟）： * 1. 原站 `.HeadStyle1 a` 是 `position:absolute; width:50px; height:25px`， * **写死尺寸**；而容器 `.HeadStyle1{height:40px; overflow:hidden}` * —— 只把 a 撑高会被祖先 `overflow:hidden` **裁掉**（约定 29）。 * 所以**容器高度必须一起放开**（`height:auto`，由 span 的 * `line-height:45px` 自然撑到 45px，刚好容得下 44px 的 a）。 * 2. 容器**不能**改 `overflow` —— `span` 是 `float:left`， * `overflow:hidden` 同时在建 BFC 包住浮动；改成 `visible` * 容器高度会塌成 0（约定 29 的反面：撑高失效）。 * * ★ 这些规则都在 ≤991 媒体查询里，**桌面完全不受影响** —— * 桌面锚点 5086/3423/2557 依赖 `.HeadStyle1` 的 40px，必须保住。 * ------------------------------------------------------------------- */ .HeadStyle1, .HeadStyle2{ height:auto; /* 40px → 由 span 行高撑开（约 45px） */ min-height:var(--aa-tap); } /* 「更多>>」：两套标题的定位方式不同（1 是 absolute，2 是 float）， 这里统一成同一个视觉形态，所以把定位差异也一并抹平。 */ .HeadStyle1 a, .HeadStyle2 a{ display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:var(--aa-tap); height:auto; min-height:var(--aa-tap); line-height:1.2; padding:0 var(--aa-s3); margin-top:0; box-sizing:border-box; } /* absolute 那个要重新贴底，否则 44px 会从 40px 容器里冒出去 */ .HeadStyle1 a{ bottom:0; right:0; } /* 商品/礼品卡的「查看详情」小按钮 */ .piclist .info .other .span.detail a, .piclist .info .other .detail a{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--aa-tap); padding:0 var(--aa-s3); box-sizing:border-box; } /* 首页「最新资讯」右侧的「更多」 */ .content_right .newest_box .newest .more a{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--aa-tap); padding:0 var(--aa-s3); box-sizing:border-box; } } /* =========================================================================== * ≤767px —— 手机 —— 单列 + 卡片化（用户优先级最高的一档） * ========================================================================= */ @media (max-width:767px){ :root{ --aa-gutter:12px; } /* ---- 2. 首页区块 ---- */ .main_box .banner img, .main_box .banner2 img, .main_box .banner3 img, .main_box .banner4 img, .main_box .banner5 img, .main_box .banner8 img, .main_box .banner9 img{ width:auto; height:auto; max-width:100%; } .content_left .ShowSlide, .content_left .ShowSlide .SlidePics, .content_left .ShowSlide .SlidePics .Pic img{ width:auto; max-width:100%; height:auto; } .main_box .supermarket{ display:block; } .main_box .supermarket .supermarket_left, .main_box .supermarket .supermarket_right{ float:none; width:auto; } .VisitingService, .VisitingService .VisitingServiceRight{ display:block; float:none; width:auto; } .VisitingService .VisitingServiceRight{ margin-top:var(--aa-s4); } /* ---- 3. 侧栏面板：单列 + 默认收起 ---- */ .BencandyCont .Side{ display:block; } .BencandyCont .Side .sidecont{ width:auto; margin-bottom:var(--aa-s3); } /* ---- 4. 首页文字网格折叠（阶段 3c「首页瘦身」）---- * * 背景：移动端首页实测 **15859px**（第二名 `bbs_topic` 才 26779 但那是帖子页）， * 是全站最高的内容页 —— 用户要滑 19 屏。剖析后 13998px 都在 `.main_box` 里， * 其中三块「文字列表栅格」各占 ~2000px： * .topstories_box1 40 个 td → 2040px * .topstories_box3 40 个 td → 2010px / 2000px * 它们桌面是 **4 列**（``），手机上每列各占一行 → * 40 个 td 就是 40 行，单块 2000px。 * * 手法：**默认只显示前 12 条，其余折叠**，底部给一个「展开更多」按钮。 * ★ 只做视觉折叠，**DOM 内容一个不减** —— 爬虫与 Ctrl+F 仍能看到全部条目， * 不影响 SEO（这是审计文档 §5 护栏里写死的要求：首页瘦身不得减 DOM）。 * ★ 折叠靠 CSS 的 `:nth-child(n+4)`，**不靠 JS 改 DOM**；JS 只负责 * 切换一个类 + 同步 `aria-expanded`。所以 JS 挂了也不会「内容全消失」， * 只是按钮点不动（且此时按钮本身也不显示 —— 见下）。 * ★ 按钮用 CSS `::after` **造不出来**（它要能点、要有 aria）→ 由 nav.js * 在 `initHomeFold()` 里插入；没有 JS 就没有按钮，也就没有折叠，退化成 * 完整长列表 —— 不是死路。 * * ⚠⚠ 这块**踩过一次坑，务必看完再改数字**： * 第一版写的是 `td:nth-child(n + 13)`，以为「40 个 td 是同一个 tr 的兄弟」， * 结果是**完全没生效**（`tdsVisible` 仍等于 `tdsTotal`）。 * 实测真实结构是 **10 个 `` × 每个 4 个 ``** —— * 每个 tr 里只有 4 个兄弟 td，`nth-child(13)` 永远不存在， * 所以那条规则一条都没匹配上，而且**不报错、界面看起来也「正常」** * （只是没折叠）。→ 折叠的**单位是 ``，不是 ``**。 * 加这种「按序号藏一批兄弟节点」的规则，必须先量清**兄弟是哪一个层级**。 * * ★ 为什么是 `n+4`（= 3 个 tr）：手机档下 `tr` 被改成 `display:flex; * flex-wrap:wrap`、`td` 占 50%，所以 **1 个 tr = 2×2 = 4 条**； * 3 个 tr = 12 条，正好「一屏多一点」，够用户判断这块有没有他要的内容。 * ⚠ 这个 12 和 nav.js 里 `tds.length <= 12` 的跳过阈值是**同一个数**， * 改一个必须改另一个。 */ html.aa-js .main_box .topstories.aa-fold-ready > table > tbody > tr:nth-child(n + 4), html.aa-js .main_box .topstories2.aa-fold-ready > table > tbody > tr:nth-child(n + 4){ display:none; } /** * ⚠⚠ 第二坑：**展开规则必须把 `:nth-child` 也写回去**。 * 收起规则带 `:nth-child(n + 4)` → (0,5,**1**)； * 第一版展开规则写的是 `tr` → (0,5,**0**)。 * 于是 `.aa-fold-open` 明明是加上了（实测类名确实在）， * **但收起规则的特异性更高，照样把它按回去** → 点了没反应。 * → 展开规则必须写出**完全相同的选择器形状**，只把 `display` 换个值。 * 同源教训：约定 40/55 的「同权重靠后加载取胜」有个前提 —— * **权重得真的同**；少一个伪类就不再同权重了。 */ html.aa-js .main_box .topstories.aa-fold-open > table > tbody > tr:nth-child(n + 4), html.aa-js .main_box .topstories2.aa-fold-open > table > tbody > tr:nth-child(n + 4){ display:flex; } /* 展开/收起按钮：由 JS 追加到栅格之后。 ⚠ 它**只在手机档存在** —— 桌面档没有折叠（CSS 那条 `tr:nth-child` 在 767 块内），按钮自然也不该出现；否则会凭空多出 4 个元素把首页撑高 （实测：桌面锚点 5086 → 5170，正是这 4 个按钮的高度）。 所以这里用 `display:none` 打底、在本媒体查询里才 `display:flex`。 */ html.aa-js .main_box .aa-fold-btn{ display:flex; align-items:center; justify-content:center; gap:var(--aa-s1); width:100%; min-height:var(--aa-tap); margin-top:var(--aa-s2); padding:0 var(--aa-s4); border:1px solid var(--aa-line); border-radius:var(--aa-r); background:var(--aa-bg-2); color:var(--aa-t2); font-size:var(--aa-f-md); line-height:1; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background-color var(--aa-dur) var(--aa-ease), border-color var(--aa-dur) var(--aa-ease); } html.aa-js .main_box .aa-fold-btn:hover{ background:var(--aa-bg-3); border-color:var(--aa-green); color:var(--aa-green); } html.aa-js .main_box .aa-fold-btn::after{ content:''; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-1px,-1px); transition:transform var(--aa-dur) var(--aa-ease); } html.aa-js .main_box .aa-fold-btn[aria-expanded="true"]::after{ transform:rotate(-135deg) translate(-2px,-2px); } } /* =========================================================================== * ≤479px —— 小屏手机 —— 再收一档 * ========================================================================= */ @media (max-width:479px){ :root{ --aa-gutter:10px; } /* 缩略图再小一点，给文字让位 */ .ArticLists li dl dt{ flex:0 0 92px; width:92px; } .ArticLists li dl dt img{ width:92px; max-width:92px; max-height:104px; } .ArticLists li dl dd h3 a{ font-size:var(--aa-f-md); } .Infotitle{ font-size:var(--aa-f-xl); } .InfoContent{ font-size:var(--aa-f-md); } /* 页脚收到单列 */ .Footer .PartnerBox .Partner ul{ flex:1 1 100%; } /* 顶栏城市下拉只留当前城市 */ .HeaderTop .MainContainer .citys dd{ display:none; } /* 搜索类型字号再收 */ .Logo_Search .search .types li{ font-size:var(--aa-f-xs); padding-left:8px; padding-right:8px; } }