/* ============================================================================= * responsive-list.css —— 列表页：栏目列表 / 板块列表 / 城市索引 / 分页 * * ★ 本文件由 `responsive.css` 拆分而来（2026-09-26），**声明值一字未改**， * 只做了「按归属分文件 + 按断点排序 + 章节重编号」。 * 拆分前的单文件版备份在 `responsive.css.bak`，回滚见该文件头。 * * ★ 断点顺序（全站 4 档，各文件内部顺序一致）： * ≤1199px 小桌面 / 横屏平板 * ≤991px 平板竖屏 * ≤767px 手机 * ≤479px 小屏手机 * * ⚠ 权重：选择器必须 ≥ 原站同名规则。同权重靠后加载即胜出，**尽量不写 * 强制声明（`!` + `important`）**。会被原站更高特异性规则压掉的，必须带上 * 与原站相同的祖先前缀（约定 40 / 41）。 * ========================================================================== */ /* =========================================================================== * ≤991px —— 平板竖屏 —— 侧栏下沉，导航变抽屉，列表降列 * ========================================================================= */ @media (max-width:991px){ /* ---- 1. 模块首页的多列链接表降为 2 列 ---- */ .ListStyle1 table td{ width:50%; } /* ---- 2. 分页按钮 ≥44px ---- 原来这条只写在 ≤767px，768px 平板上分页链接只有 7×17（"1"/"2" 这种 单字符页码），完全点不中。提到 ≤991px。 ★ `display:inline-block` 不能省：`min-width`/`min-height` 对 **非替换行内元素无效**，而 `.ShowPage a` 默认就是 `display:inline` —— 少了这一行，上面两个 min-* 全部不生效（实测 768px 那档仍然 7×17）。 */ .ShowPage a{ display:inline-block; min-width:var(--aa-tap); min-height:var(--aa-tap); line-height:var(--aa-tap); box-sizing:border-box; text-align:center; vertical-align:middle; } /* ---- 3. 触控目标：把几个 19~22px 高的链接抬到 44px ---- 这些是 bbs 侧栏版块导航、礼品页商品名/「去看看」按钮 —— 都是列表里的主操作入口，19px 高在手机上基本点不中。 ★ 同样必须 `display:block`/`inline-block`，否则 min-height 对行内元素无效。 */ .Side .SortCont .cont .all > a, .Side dl.listsort > dt > div > em > a, .content_text_left_footer .look_box .lista > a.title, .content_text_left_footer .look_box .lista > a.goto, .banner_hot > dl > dd > div > a{ display:block; min-height:var(--aa-tap); line-height:var(--aa-tap); box-sizing:border-box; } /* 礼品页商品名两行会超 44px，用 flex 垂直居中更稳 */ .content_text_left_footer .look_box .lista > a.title{ display:flex; align-items:center; line-height:1.5; padding-top:var(--aa-s1); padding-bottom:var(--aa-s1); } /* ---- 4. bbs 版块列表底部「发帖 + 分页」条 .OtherCont ---- 原站 `list2.css`： .OtherCont{ height:100px; overflow:hidden; padding-left:150px; } .OtherCont .post{ position:absolute; left:0; top:25px; width:120px; } .OtherCont .infos{ position:absolute; top:50px; right:10px; } 窄屏下 `padding-left:150px` 只剩 240px 放分页，44px 的页码要折 3 行， 而容器只有 100px → **后 3 个页码被整块裁掉**（实测 58px）。 手机上没必要保留「左浮按钮 + 右浮信息」的绝对定位布局，改成正常文档流。 */ .OtherCont{ height:auto; overflow:visible; padding-left:0; } .OtherCont .post{ position:static; width:auto; max-width:220px; height:auto; line-height:var(--aa-tap); margin:0 0 var(--aa-s3); } .OtherCont .ShowPage{ text-align:left; padding:0; } .OtherCont .infos{ position:static; width:auto; height:auto; line-height:1.8; text-align:left; margin-top:var(--aa-s3); } /* ---- 5. 礼品页左栏「最新」列表 ul.newslist ---- 原站 `modules/gift/pc/index.css:80 .newslist{overflow:hidden; height:100px}`。 100px 只放得下 3 行，窄屏下第 2/3 条的标题折行后就被裁掉 （实测裁掉 62px / 106px）。放开高度即可 —— 这是列表不是轮播， 没有「必须固定高度」的理由。 */ .content_text_left_footer ul.newslist{ height:auto; overflow:visible; } /* ---- 6. 礼品页左栏「推荐礼品」卡片列表 .look_box ---- 原站 `.look_box{width:100%; float:left; padding-bottom:20px; height:300px}`。 ★ 实测对比（别删，这是「桌面没问题、窄屏才炸」的判据）： 桌面 1200px：每条 `.lista` 高 88px，3 条 = 264px，正好塞进 300px —— 不裁。 窄屏 390px：上面 §14 把 `.title` / `.goto` 抬到 44px 触控高度后， 每条 `.lista` 变成 132px，3 条 = 441px， **第 3 条整块被 `.content_text_left_footer{overflow:hidden}` 裁掉 121px**。 → 是响应式改造自己引入的问题，只需在窄屏放开这个固定高度。 `.look_box` 自身没有 overflow:hidden，所以 `height:auto` 就够了 （外层 footer 是 BFC，会自动包住 float 子元素）。 */ .content_text_left_footer .look_box{ height:auto; } /* ---- 7. /allcity/ 城市字母表 ---- 原站（主题 style.css）`.AllCityGroup li{float:left; width:12.5%}` —— 一行 8 个。桌面 1200px 下每格 150px 够用；手机 350px 下每格只有 **43.75px**，装不下「乌鲁木齐」这种 4 字市名（56px）， 被 `text-overflow:ellipsis` 截成「乌…」。 窄屏改成一行 3 个（33.33%），城市名基本都能完整显示。 */ .AllCityGroup li{ width:33.3333%; } /* 字母索引条：原站是 22px 最小宽 + 2px 上下内边距 = 36×31，偏小 */ .AllCityIndex a{ display:inline-flex; align-items:center; justify-content:center; min-width:var(--aa-tap); min-height:var(--aa-tap); box-sizing:border-box; } /* ---- 8. 论坛版块信息区 .BaseInfo（论坛首页 / 版块列表页）---- 原站 `modules/bbs/pc/list2.css`： .BaseInfo{ height:110px; overflow:hidden; position:relative; padding-left:110px; padding-top:20px; } .BaseInfo .logo{ position:absolute; left:0; top:20px; width:80px; } .BaseInfo .infos{ height:100px; } .BaseInfo .infos dt, .BaseInfo .infos dd{ width:50%; height:100px; float:left; } 三层固定高度叠在一起。窄屏下 `.BaseInfo` 内容宽只剩 230px， `dt`/`dd` 各 115px，`dd` 里「请点击顶登录按钮 / 扫描二维码即可登录」 折成 4 行 = 105px，加上 `ol` 的 30px 共 135px > `dd` 的 100px， 溢出后被 `.BaseInfo{overflow:hidden}` **裁掉 25px**（实测 360px 档， 390px 档刚好卡在边界上「侥幸通过」—— 这种临界值最容易漏）。 → 窄屏改成 flex：logo 在左、信息在右，`dt`/`dd` 改为上下排列、高度自适应。 ⚠ **必须用 `:has()` 限定**：`.BaseInfo` 有两个变体 —— · `list2.css`（本页用的）→ `.logo` + `.infos` · `listb.css`（论坛帖子详情页）→ `.title` + `.info`，且带 `padding:10px 180px 50px 15px` 的完全不同的版式。 不加限定会连带改坏帖子页。`:has()` 不被支持时整条规则被丢弃， 退化为现状，不会产生半截样式。 */ .BaseInfo:has(> .infos){ height:auto; overflow:visible; padding:0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--aa-s3); } .BaseInfo:has(> .infos) > .logo{ position:static; left:auto; top:auto; flex:0 0 auto; } .BaseInfo:has(> .infos) > .infos{ flex:1 1 180px; min-width:0; height:auto; overflow:visible; } .BaseInfo:has(> .infos) .infos dt, .BaseInfo:has(> .infos) .infos dd{ width:100%; height:auto; float:none; } .BaseInfo:has(> .infos) .infos dt ul li, .BaseInfo:has(> .infos) .infos dd ul li{ height:auto; overflow:visible; } /* 原站 `dd` 是右对齐的（因为它在右半栏），改成上下排列后右对齐会很难看 */ .BaseInfo:has(> .infos) .infos dd ul ol, .BaseInfo:has(> .infos) .infos dd ul li{ text-align:left; } } /* =========================================================================== * ≤767px —— 手机 —— 单列 + 卡片化（用户优先级最高的一档） * ========================================================================= */ @media (max-width:767px){ /* ---- 1. 列表页：表格 → 卡片（纯 CSS，模板只补 data-label） ---- */ /* 2a. 用 dl 的列表（栏目列表页 .ArticLists）—— 缩略图左、文字右、元信息下 */ .ArticLists li{ padding:var(--aa-s3) 0; border-bottom:1px solid var(--aa-line-l); } .ArticLists li dl{ display:flex; gap:var(--aa-s3); align-items:flex-start; width:auto; } .ArticLists li dl dt{ display:block; flex:0 0 108px; width:108px; height:auto; padding:0; text-align:left; } .ArticLists li dl dt img{ width:108px; height:auto; max-width:108px; max-height:120px; object-fit:cover; border-radius:var(--aa-r-sm); } .ArticLists li dl dd{ display:block; flex:1 1 auto; min-width:0; padding:0; } .ArticLists li dl dd h3 a{ font-size:var(--aa-f-lg); line-height:1.45; padding-left:0; margin-bottom:var(--aa-s1); } /* 摘要限制 2 行，避免长文本把卡片撑高 */ .ArticLists li dl dd p{ font-size:var(--aa-f-sm); line-height:1.6; padding-left:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* 元信息条：原站是 absolute 定位，手机上改回普通流 */ .ArticLists li div{ position:static; left:auto; bottom:auto; width:auto; height:auto; line-height:1.7; margin-top:var(--aa-s2); font-size:var(--aa-f-xs); display:flex; justify-content:space-between; gap:var(--aa-s2); } .ArticLists li div span, .ArticLists li.ispic div span{ float:none; padding-left:0; } .ArticLists li div em{ float:none; padding-left:0; background-position:left center; padding-right:0; } /* 2b. 用 table 的列表（模块首页 .ListStyle1 等）—— 多列链接表转单列 */ .ListStyle1 table, .ListStyle1 tbody, .ListStyle1 tr, .ListStyle1 td{ display:block; width:auto; } .ListStyle1 td{ padding:var(--aa-s2) 0; border-bottom:1px dashed var(--aa-line-l); } .ListStyle1 td:last-child{ border-bottom:0; } .ListStyle1 td > div{ line-height:1.6 !important; font-size:var(--aa-f-md); } /* 2b-2. 阶段 2b：手机上给这些「裸链接」补回视觉锚点。 桌面档（components.css 第 16b 节）用 `td > div:before` 画了左侧小圆点、 并用 `border-bottom` 画了行分隔线；但那条规则在手机档**被这里上面 覆写成了 `border-bottom:1px dashed`（挂在外层 td 上）**，圆点也没了 —— 结果就是一屏纯文字，用户在 320px 上完全找不到「一行到哪结束」。 这里补回：左侧圆点 + ≥44px 点击热区 + 标题色 + 按压反馈。 ⚠⚠ **热区必须做在 `` 上，不能做在 `
` 上。** 第一版把 `min-height:44px` 加在 `td > div` 上，div 确实变高了， 但断言量的是 **`` 的 bounding box**（可点的是 a，不是 div）—— a 仍然只有 21px（一行文字高），于是 3 个视口全报「触控目标<24px」。 改法：让 a `display:block` + `min-height` + `padding` + flex 居中， **让 a 自己就是整个 44px 的块**（约定 43 的同源教训： 全绿/全红时要问「量的是元素还是容器」）。 ⚠ 只用 `.MainCont2 .ListStyle1` 前缀（与 components.css 同权重）， 避免误伤 16a 的图文网格（那个结构里 td 下没有 div）。 */ .MainCont2 .ListStyle1 td > div{ position:relative; padding:0; } .MainCont2 .ListStyle1 td > div:before{ content:''; position:absolute; left:0; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--aa-green); z-index:1; } /* ★ a 自己撑满整行 —— 这才是真正的触控目标 */ .MainCont2 .ListStyle1 td > div > a{ display:flex; align-items:center; width:100%; min-height:var(--aa-tap); padding:var(--aa-s2) 0 var(--aa-s2) var(--aa-s4); color:var(--aa-t2); font-size:var(--aa-f-md); line-height:1.5; transition:background-color var(--aa-dur) var(--aa-ease); } /* 按下反馈（触摸设备上没有 :hover） */ .MainCont2 .ListStyle1 td > div > a:active{ background-color:var(--aa-bg-3); } /* 2c. 通用兜底：正文里的宽表格允许横滑，不撑破页面 */ .InfoContent table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* 2d. 礼品页商品表：3 列在手机上太挤 → 单列卡片 */ .Showlist_box > table, .Showlist_box > table > tbody, .Showlist_box > table > tbody > tr, .Showlist_box > table > tbody > tr > td{ display:block; width:auto; } .Showlist_box > table > tbody > tr > td{ padding-bottom:var(--aa-s4); margin-bottom:var(--aa-s4); border-bottom:1px solid var(--aa-line-l); } .Showlist_box > table > tbody > tr > td:last-child{ border-bottom:0; } /* ---- 2. 分页：间距与字号收紧（44px 尺寸已在 ≤991px 那档给过） ---- ★ 选择器要带 `.wrap`（(0,2,0)/(0,2,1)），否则被 `list2.css` 里 `.OtherCont .ShowPage` / `.OtherCont .ShowPage a` 压掉 （同为 (0,2,0)/(0,2,1)，但我们是后加载 → 加 `.wrap` 打平后我们赢）。 `.ShowPage` 只出现在 `/bbs/`、`/wei/`、`/search/` 三页， 且都确认在 `.wrap` 内（`diag_shadowed.py` 查出来的）。 */ .wrap .ShowPage{ padding:var(--aa-s3) 0; line-height:1.6; } .wrap .ShowPage a{ padding:0 var(--aa-s2); margin:2px; font-size:var(--aa-f-md); } /* ---- 3. 招聘页（/hr/ 及 hr 列表）：float 两栏 + 内联写死宽度的表格 ---- 实测结构： .content_text{overflow:hidden} ← 裁剪者 .text_left {float:left; 90px} 职位分类侧栏 .text_right{float:left; width:76%} ← **内联 style** 写死 76% table.search_job style="width:97%; height:66px; margin-left:25px" .form1{width:100%} .title{width:197px; float:left} .type{width:241px; float:left} .mian_submit_box{width:413px; float:left; margin:8px 0 0 20px} .mian_input_box{width:315px} .mian_button_box{width:78px} 两个叠加的问题： ① `.text_right` 是内联 `width:76%`（=283px），里面还要塞 min-content 435px 的搜索表 → 溢出 177px 被裁。 ② `table.search_job` 的 min-content 由 `.mian_submit_box`(413px) 决定； **`max-width:100%` 压不住表格**（同上），只能把里面写死宽度的 `.title / .type / .mian_submit_box` 改成流式。 做法：手机上两栏拍平成一栏，搜索表单改 flex 自适应。 ⚠ `.text_right` 的 `width:76%; float:left` 是**内联 style**， 普通规则压不住 → 这两条必须 `!important`。 */ .content_text .text_left, .content_text .text_right{ float:none !important; width:auto !important; } /* ★ DOM 顺序是「职位分类侧栏 → 主内容」，拍平成一栏后那串分类会顶在 最前面，把页面主操作（搜索表单）压到很下面。用 `order` 把主内容提前。 ⚠ `order` 只对 flex item 生效，所以必须同时给父级 `display:flex`； 而 `.content_text` **也被礼品详情页复用**（那页的侧栏是 `.content_text_left`，DOM 顺序本来就是对的）→ 用 `:has()` 只在 「直接子元素含 `.text_left`」的页面启用。 `:has()` 不被支持时整段失效 → 退化成原来的 DOM 顺序，不会更糟。 */ .content_text:has(> .text_left){ display:flex; flex-direction:column; } .content_text > .text_right{ order:1; } .content_text > .text_left { order:2; } /* 表格上的内联 `width/height/margin-left` 只能用 !important 压 */ .content_text .text_right > table[style]{ margin-left:0 !important; } .content_text table.search_job{ width:auto !important; height:auto !important; margin:0 0 var(--aa-s3) !important; } .content_text .search_job .form1{ width:auto; height:auto; display:flex; flex-wrap:wrap; align-items:center; gap:var(--aa-s2); padding:var(--aa-s3); box-sizing:border-box; } .content_text .search_job .form1 .title, .content_text .search_job .form1 .type, .content_text .search_job .form1 .mian_submit_box{ float:none; width:auto; height:auto; margin:0; background:none; } .content_text .search_job .form1 .type{ line-height:var(--aa-tap); } .content_text .search_job .mian_submit_box{ display:flex; gap:var(--aa-s2); flex:1 1 100%; } .content_text .search_job .mian_input_box{ width:auto; flex:1 1 auto; min-width:0; height:var(--aa-tap); line-height:var(--aa-tap); padding-left:var(--aa-s3); box-sizing:border-box; } .content_text .search_job .mian_button_box{ flex:0 0 auto; width:auto; height:var(--aa-tap); line-height:var(--aa-tap); padding:0 var(--aa-s3); } /* ★ `.text_right_top` 是「60% 资讯表 + 40% 按钮区」两格，里面还埋着两个坑： · 每个资讯项 `
` —— 定高 18px 却装 15px/30px 的标题，窄列里标题折成 3~4 行 → 文字**溢出到后面几行** （截图里看着像「重叠」，其实是 div 没长高）； · 按钮表 `` —— 负外边距本来是为了跟左格对齐，拍成单栏后会把按钮顶进上面的内容里。 → 手机上两格拍平成一栏，并把这两个「定高 / 负边距」放平。 ⚠ 都是内联 style，只能 !important。 */ .content_text .text_right_top > tbody > tr > td{ display:block; width:auto !important; height:auto !important; padding-left:0 !important; padding-right:0 !important; } .content_text .text_right_top td > div[style]{ height:auto !important; min-height:18px; } .content_text .text_right_top td > table[style]{ height:auto !important; margin-top:0 !important; } /* ---- 4. bbs 帖子页：`只看楼主 / 回复` 工具条 ---- 原站 `.BaseInfo .ActionBox{width:600px; left:15px; position:absolute}`， 定位上下文是 `.BaseInfo{position:relative; padding:10px 180px 50px 15px}`。 通用兜底给了 `max-width:100%`(375px)，但 `left:15px` 仍然把右沿推到 399px > `.Main`(385px) → 裁 14px。 改成 left/right 同时贴边、宽度交给 auto，右沿刚好落在容器内。 */ .BaseInfo .ActionBox{ left:0; right:0; width:auto; padding-left:15px; box-sizing:border-box; } } /* =========================================================================== * ≤479px —— 小屏手机 —— 再收一档 * ========================================================================= */ @media (max-width:479px){ /* ---- 1. 新闻模块首页「最新书画资讯」列表（`.TodayNews .list`）---- 结构 `ul.list > table[width=100%] > tr > td[width=50%] > li > a`。 `li` 是 `height:30px; line-height:30px; overflow:hidden`， `a` 上挂着内联 `margin-left:25px; font:15px/30px`（约定 35：内联是硬墙）。 320px 下每格只有 140px，正文可用 = 140 − 5(text-indent) − 25(内联) = **110px**， 而标题要 **112px** → 折成两行，第二行被 `overflow:hidden` 切掉（46 条全中， 截图里每条都只剩半行）。360px 起可用 130px ≥ 112px 就不折行了 —— 所以这是个**只在 ≤335px 才现形的悬崖**，断言在 360/390 全绿也查不出来。 → ① 去掉那条死缩进（所有 `li` 都是 `nth-child(1)`，前面的 `` 早已 `display:none`，25px 是白留的）；② 放开定高，让任何长度的标题都能完整显示， 不再依赖「刚好放得下」。 */ .TodayNews .list li{ height:auto; min-height:30px; overflow:visible; } .TodayNews .list li a{ margin-left:0 !important; } }