/* ============================================================================= * responsive-shell.css —— 站点外壳：顶栏 / 头部 / 搜索 / 导航抽屉 / 页脚 / 浮动挂件 * * ★ 本文件由 `responsive.css` 拆分而来（2026-09-26），**声明值一字未改**， * 只做了「按归属分文件 + 按断点排序 + 章节重编号」。 * 拆分前的单文件版备份在 `responsive.css.bak`，回滚见该文件头。 * * ★ 断点顺序（全站 4 档，各文件内部顺序一致）： * ≤1199px 小桌面 / 横屏平板 * ≤991px 平板竖屏 * ≤767px 手机 * ≤479px 小屏手机 * * ⚠ 权重：选择器必须 ≥ 原站同名规则。同权重靠后加载即胜出，**尽量不写 * 强制声明（`!` + `important`）**。会被原站更高特异性规则压掉的，必须带上 * 与原站相同的祖先前缀（约定 40 / 41）。 * ========================================================================== */ /* =========================================================================== * ≤1199px —— 小桌面 / 横屏平板 —— 容器等比收窄，栅格不变（下列规则不套 @media，桌面同样生效） * ========================================================================= */ /* =========================================================================== * 移动端导航抽屉的骨架元素 * 按钮由 header.php 输出，遮罩由 nav.js 创建。 * 无 JS（html 上没有 .aa-js）时按钮不显示，导航走 base-modern.css 的横滑兜底。 * ========================================================================= */ .aa-nav-toggle{ display:none; align-items:center; justify-content:center; width:var(--aa-tap); height:var(--aa-tap); padding:0; border:0; background:transparent; cursor:pointer; color:var(--aa-t2); box-sizing:border-box; } .aa-nav-toggle .aa-bars{ position:relative; display:block; width:20px; height:2px; background:currentColor; border-radius:2px; } .aa-nav-toggle .aa-bars::before, .aa-nav-toggle .aa-bars::after{ content:''; position:absolute; left:0; width:20px; height:2px; background:currentColor; border-radius:2px; } .aa-nav-toggle .aa-bars::before{ top:-6px; } .aa-nav-toggle .aa-bars::after{ top:6px; } .aa-nav-mask{ position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.45); /* ★★ 必须高过原站 `.HeaderTop .MainContainer{z-index:1000000}`（见 `assets/images/style7.0/global.css:32`）。写成 1001 时顶栏 40px 不会被压暗， 而且那一带的点击会落到顶栏上 —— 抽屉第一项的下半截因此点不动。 */ z-index:1000001; opacity:0; pointer-events:none; transition:opacity .24s var(--aa-ease); } html.aa-nav-open .aa-nav-mask{ opacity:1; pointer-events:auto; } /* 移动端专属的紧凑会员入口（桌面隐藏） */ .aa-member-m{ display:none; } /* =========================================================================== * ≤1199px —— 小桌面 / 横屏平板 * 容器已在 base-modern.css 收窄；这里只降导航字号，保证 16 项仍能一行放下。 * ========================================================================= */ /* =========================================================================== * ≤991px —— 平板竖屏 —— 侧栏下沉，导航变抽屉，列表降列 * ========================================================================= */ @media (max-width:991px){ /* ---- 1. 顶栏：城市保留，登录表单换成紧凑入口 ---- */ .HeaderTop .MainContainer{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--aa-s2); } .HeaderTop .MainContainer .citys{ float:none; } .HeaderTop .MainContainer .TopMember{ float:none; } /* 桌面那套「帐号+密码+登录」在手机上没法用 → 换成链接 */ .HeaderTop .TopMember .Logincont > span, .HeaderTop .TopMember .Logincont input, .HeaderTop .TopMember .Logincont a.wx{ display:none; } .HeaderTop .TopMember .Logincont > a{ display:inline; } .HeaderTop .TopMember .Logincont{ line-height:var(--aa-tap); } /* ★ 移动端会员入口必须自己撑住宽度，且横向排。 踩过：只写 `display:block` 时，`.aa-member-m` 作为 flex item 被压到 min-width(44px)，里面的「登录 / | / 注册」三个子元素于是**竖着堆叠**， 整块高 107px，被只有 40px 高的 `.HeaderTop` 裁掉 —— 页面上只看得到 「登录」，「注册」凭空消失。而且横向 scrollWidth 仍是 390， 触控目标也是 44×44，**探针六条断言全绿也查不出来**。 所以这里显式 flex + nowrap + flex:0 0 auto，不让它被压。 */ .aa-member-m{ display:flex; align-items:center; flex:0 0 auto; white-space:nowrap; } .HeaderTop .TopMember form{ display:none; } /* ---- 2. 头部：logo + 汉堡一行，搜索独占一行 ---- */ .Logo_Search{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--aa-s2); padding-top:var(--aa-s2); padding-bottom:var(--aa-s2); } .Logo_Search .logo{ float:none; order:1; /* ★ `flex-basis` 必须是 0，不能留 `auto`。 原站 `global.css` 给 `.Logo_Search .logo` 写了 `width:280px` （桌面 logo.png 固有 280×83），`flex:1 1 auto` 的基准尺寸于是取到 280px —— 而 `.Logo_Search` 是 `flex-wrap:wrap`，分行是按 **基准尺寸**算的：280 + 92(两个按钮) + 44(汉堡) + 16(gap) = 432 > 373， 于是「发布信息/公众号/汉堡」被挤到第二行， logo 自己占满第一行 —— 正是要修掉的「多占一行」。 改成 `flex:1 1 0%` 后基准为 0，三者同行，logo 再 grow 吃掉剩余空间。 */ flex:1 1 0%; min-width:0; } .Logo_Search .logo img{ max-height:44px; width:auto; /* ★ 顶栏第一行现在要挤下「logo + 两个 44px 图标按钮 + 汉堡」—— 固定部分占 44×3 + 2 个 gap = 152px，320px 视口下 logo 只剩 ~148px。 原规则只有 `max-height`、**没有 `max-width`**，而 logo.png 固有 280×83， 按 max-height:44 反算出 148.4px 宽 —— 正好卡在临界点上， 多一个像素就会顶出横向滚动条（`html.scrollWidth > innerWidth`）。 */ max-width:100%; height:auto; } .aa-nav-toggle{ display:flex; /* ★ 由 2 改成 3：「发布信息 / 公众号」两个图标按钮插到它左边。 order 相同的话按 **DOM 顺序**排，而 `.MoreAct` 在 header.php 里 排在汉堡**之后**，会排成「汉堡在左、按钮在右」—— 和「汉堡贴右边缘」的通用习惯相反。 */ order:3; flex:0 0 auto; } .Logo_Search .search{ float:none; order:4; flex:1 1 100%; width:auto; /* ★ flex item 的 `min-width:auto` 会退化成 **min-content**， 于是 `.search` 永远不窄于「`.keyword` 的 92px 内边距 + input 固有宽」 ≈ 320px。在 320px 视口下（`.Logo_Search` 内容盒只有 300px） 就会被顶出去 20px → `html.scrollWidth=330`。 390 / 360 档看不出来（min-content 320 < 容器宽），所以之前没暴露。 */ min-width:0; margin-top:var(--aa-s2); } /* 二维码浮层在手机上默认仍然藏起来（它是桌面 hover 的产物）， 但点「公众号」图标要能弹出来 —— 见下面的 `.aa-open`。 ⚠ 原站的定位是 `right:350px; top:150px`（`style7.0/global.css:246`）， 那是按 1200px 顶栏量的：393px 视口下 190px 宽的卡片会被整个推到 屏幕左侧之外，点开也看不见。所以手机上改成视口居中。 */ .Logo_Search .m-mobleLook, .Logo_Search .CodeWxin{ display:none; } .Logo_Search .CodeWxin.aa-open{ display:block; position:fixed; top:50%; left:50%; right:auto; transform:translate(-50%,-50%); z-index:99999; /* ★ 用 100vmax 的 spread 阴影当「遮罩」：不必新增元素、不必给 body 加类，也**不受任何父级 stacking context 影响** —— 遮罩和卡片永远 同层、永远画在卡片之下。box-shadow 不参与布局， 所以不会撑大 scrollWidth，断言 ①/⑧ 都不受影响。 */ box-shadow:0 0 0 100vmax rgba(0,0,0,.38), 0 16px 48px rgba(0,0,0,.3); } /* ---- 3. 「发布信息 / 公众号」：从「独占一行」收成两个 44×44 图标按钮 ---- 用户反馈：「在手机上占用一行且置顶不美观」。 旧做法是 `flex:1 1 100%` 让它们独占一行（62px 高）+ 8px 上边距 = 78px， 顶栏因此高达 255px；而且两个按钮只占左边 1/3，右边一大片空白。 现在改成和 logo、汉堡**同一行**（order:2，排在汉堡左边）， 顶栏从 255px 降到 ~177px。 代价是这一行放不下「图标 + 文字」——393px 下试算： 148(logo) + 90×2(带字按钮) + 44(汉堡) + gap/padding ≈ 420 > 393， 所以按钮**只显示图标**，文字用 `font-size:0` 隐去； 文本节点仍在 DOM 里，`` 的可访问名不受影响。 ★ 这也正是必须把图标换成 SVG 的原因：纯图标方案下， 26px 的位图重采样发虚会非常显眼。 */ .Logo_Search .MoreAct{ float:none; order:2; flex:0 0 auto; display:flex; gap:var(--aa-s2); margin:0; /* ★ 原站是 `height:70px; overflow:hidden`。以前把 `a` 改成「图标在上、 文字在下」的两行布局后需要 ~97px，70px 的 ul 会把文字**垂直裁掉 27px** （只剩图标和半个字）。横向没溢出、触控也达标，前六条断言全绿， 是 check_responsive.py 的「文字被裁」检查抓到的。 现在虽然不再显示文字，同样不能让 ul 去裁 `a` —— 保留 height:auto。 */ height:auto; overflow:visible; } /* ★ 「发布信息 / 公众号 / 手机版」三个按钮 —— 必须重排图标与文字。 原站的做法是「靠 padding 顶开」： .MoreAct li{ width:60px; height:70px; overflow:hidden; } .MoreAct li a{ padding-top:52px; line-height:20px; } .MoreAct li a:before{ position:absolute; top:5px; left:10px; width:40px; height:40px; } 即文字被 `padding-top:52px` 顶到 52~72px 处，而 `li` 只有 70px 高、 还带 `overflow:hidden` —— **原站自己就把文字下沿裁掉了 2px**。 踩过：我原先只在 ≤767px 给 `a` 加了 `display:flex; align-items:center; min-height:44px`，于是 `a` 的内容盒至少要 44px，叠加 `padding-top:52px` 共需 96px，被 70px 的 `li` **裁掉 26px** —— 三个按钮的文字全都只剩上半截。 （横向没溢出、触控也达标、无 JS 错误，前六条断言全绿； 是 check_responsive.py 的「文字被裁」检查抓出来的。） 正确做法：把 `:before` 从「绝对定位浮在上方」改成「正常流的图标」， 用 flex 纵向排列，`li` 不再需要固定高度和裁切。 */ .Logo_Search .MoreAct li{ float:none; width:auto; height:auto; overflow:visible; } /* ★ 必须逐个改回来：原站的 `li.wx{margin:0 10px}` 特异性 (0,3,1) 高于上面那条 `li{width:auto}` (0,2,1)， 而 `margin:0 10px` 会和 flex 的 `gap` 叠加成 20px+ 间距。 （原站还有一条 `li.mob{width:50px}` 导致「手机版」折行， 该按钮已删，规则一并移除。） */ .Logo_Search .MoreAct li.wx{ margin:0; } .Logo_Search .MoreAct li a{ display:flex; align-items:center; justify-content:center; width:var(--aa-tap); height:var(--aa-tap); min-height:0; padding:0; box-sizing:border-box; /* 隐去「发布信息 / 公众号」文字。用 font-size 而不是 text-indent —— 后者要配 `overflow:hidden`，而 overflow 会连带影响 `:before` 图标。 */ font-size:0; line-height:0; border-radius:var(--aa-r); -webkit-tap-highlight-color:transparent; } .Logo_Search .MoreAct li a:before{ position:static; top:auto; left:auto; /* 原站是 40px；这里 30px —— 44px 的按钮内留 7px 呼吸位， 比原来的 26px 略大，纯图标方案下更易辨识。 */ width:30px; height:30px; background-size:contain; background-position:center center; background-repeat:no-repeat; } /* ---- 4. 搜索表单：类型标签横滑 + 输入框不再被裁 ---- 原站结构（`global.css:145-201`）： .search{ width:560px; height:70px; overflow:hidden; position:relative; } .search ul.types{ height:25px; } ← 0..25 .search .keyword{ height:40px; padding:2px 90px 2px 2px; background:#17A763; } .search .keyword input{ width:100%; height:40px; border:0; } .search .submit{ width:90px; height:42px; position:absolute; right:0; top:25px; } 即「类型行 25px + 绿色药丸 44px ≈ 69px ≤ 70px」刚好塞满。 `.submit` 是**绝对定位**，靠 `top:25px` 对齐药丸；药丸右侧的 `padding-right:90px` 是给它让位 —— 所以绿色药丸的右 90px 其实就是「搜索」按钮的底。 ★ 踩过（视觉上很难发现，是截图放大才看出来的）： 把 `ul.types` 抬到 44px 触控高度后，总高变成 44+44=88px > 70px， **`.keyword` 和里面的 `` 一起被 `.search{overflow:hidden}` 裁掉约 20px** —— 表现是输入框占位符「请输入您想搜索的内容」**只露出上半截字**。 ⚠ 而且「文字被裁」检查（断言 7）当时**抓不到它**： 它只查「直接含可见文字」的元素，而 `` 的文字在 `placeholder` 属性里、`textContent` 是空的。→ 已给断言 7 补上表单控件。 修法：`.search` 高度放开；`.submit` 改用 `bottom:0` 贴底对齐 （比写死 `top:44px` 稳，不依赖类型行到底多高）； `.keyword` 高度自适应，让 44px 的 input 能被完整包住。 视觉不变：仍是「绿色药丸 + 白色输入框 + 右端绿色按钮」。 */ .Logo_Search .search{ height:auto; overflow:visible; } .Logo_Search .search .keyword{ height:auto; } .Logo_Search .search .submit{ top:auto; bottom:0; } /* ★★ 选择器必须写成 `ul.types`（带 `ul`），不能写成 `.types`。 原站那条是 `.Logo_Search .search ul.types{height:25px; overflow:hidden}` —— 特异性 **(0,3,1)**，而 `.Logo_Search .search .types` 只有 **(0,3,0)**。 踩过：写成 `.types` 时 `overflow-x:auto` **静默失效**， `ul.types` 实际计算值是 `hidden` —— `overflow:hidden` 仍可**程序**滚动 （`el.scrollLeft=999` 能滚到 20），但**手指滑不动**。 后果：320px 下 8 个标签共 320px > 容器 300px，最后一个「视频」 被切掉 20px 且**用户够不到**。桌面/390/360 都放得下，所以一直没暴露。 同权重 + 我们后加载 → 才真正生效。 */ .Logo_Search .search ul.types{ display:flex; flex-wrap:nowrap; height:auto; min-height:var(--aa-tap); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .Logo_Search .search ul.types::-webkit-scrollbar{ display:none; } /* ⚠ 这条 `li` **不要**写成 `ul.types li`（(0,3,2)）—— 那样会反过来压住 479 档里 `.Logo_Search .search .types li`（(0,3,1)）的 `font-size` / `padding`，标签会从 40px 涨到 44px（实测 320px 下 溢出从 20px 变成 52px）。保持 (0,3,1) 让 479 档靠「后加载」正常生效。 */ .Logo_Search .search .types li{ flex:0 0 auto; white-space:nowrap; padding-left:10px; padding-right:10px; min-height:var(--aa-tap); line-height:var(--aa-tap); } /* ---- 5. 主导航 → 抽屉 ---- */ .MainMenuBox{ position:relative; height:auto; min-height:var(--aa-tap); } html.aa-js .MainMenuBox .MenuList{ position:fixed; top:0; left:0; bottom:0; /* ★★ 原站 `.MainMenuBox .MenuList{height:50px}`（`global.css:256`）是桌面导航条 的高度。`position:fixed` 下「显式 height」会**压过** `top:0;bottom:0`， 于是抽屉只有 50px 高、`overflow-y:auto` 把其余 15 项裁在盒外 —— 点不到、看不见。**必须显式 height:auto 让 top/bottom 生效**。 */ height:auto; max-height:none; width:var(--aa-drawer); max-width:86vw; padding:var(--aa-s4) 0; margin:0; background:#fff; box-shadow:var(--aa-sh-h); /* 同遮罩：要压过原站顶栏的 1000000 */ z-index:1000002; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; transform:translateX(-100%); /* ★★ 关着的时候不能只是「挪出屏幕」：`transform` 不影响可聚焦性， 那 16 个链接依然能被 Tab 到（实测 Tab 40 次有 16 次落进看不见的抽屉）。 JS 用 `inert` 主防（顺带摘出无障碍树），这里是**不依赖 inert 的兜底**： `visibility:hidden` 同样能把整棵子树摘出 Tab 顺序。 关的方向延迟 .24s 才隐藏，让滑出动画看得见；开的方向立即显示。 */ visibility:hidden; transition:transform .24s var(--aa-ease), visibility 0s linear .24s; box-sizing:border-box; } html.aa-js.aa-nav-open .MainMenuBox .MenuList{ transform:translateX(0); visibility:visible; transition:transform .24s var(--aa-ease), visibility 0s; } /* 抽屉容器只是「焦点锚点」（`tabindex="-1"`，由 nav.js 在打开时聚焦）， 它**不在 Tab 顺序里**，所以去掉焦点环不违反 WCAG。 留着反而难看：它贴着视口三边，UA 默认那圈 1px 环会变成右沿一条突兀的细线。 */ html.aa-js .MainMenuBox .MenuList:focus{ outline:none; } html.aa-js.aa-nav-open, html.aa-js.aa-nav-open body{ overflow:hidden; } /* ★★ 抽屉里的菜单项：原站结构是
…
×16 桌面靠 `.MenuList dl{float:left}` 横排。 之前这里写的是 `li` 选择器（完全不存在），所以抽屉里 16 项全是 35px 高的 小字链接 —— 这是首轮检查里「触控目标过小 ×22」的真正原因。 */ html.aa-js .MainMenuBox .MenuList dl{ float:none; display:block; width:100%; height:auto; position:static; background:transparent; } html.aa-js .MainMenuBox .MenuList dl > dt{ display:block; width:100%; height:auto; } html.aa-js .MainMenuBox .MenuList dl > dt > span{ display:block; width:100%; } html.aa-js .MainMenuBox .MenuList dl > dt > span > a{ display:flex; align-items:center; width:auto; height:auto; min-height:var(--aa-tap); line-height:1.4; padding:0 var(--aa-s5); font-size:var(--aa-f-lg); border-bottom:1px solid var(--aa-line-xl); border-radius:0; box-sizing:border-box; } html.aa-js .MainMenuBox .MenuList dl > dt > span > a:hover{ background:var(--aa-bg-2); } /* 当前栏目高亮。 ⚠ 这里必须 !important：原站给每个 写了 inline `style="color:#000000;"`， 内联样式普通声明压不过，只能抬优先级。 */ html.aa-js .MainMenuBox .MenuList dl.ck > dt > span > a{ color:var(--aa-green) !important; font-weight:600; background:var(--aa-bg-2); } /* ---- 5b. 分组标题在抽屉里放开 ---- ★ components.css 里打底是 `.MainMenuBox .MenuList .aa-nav-sec{display:none}` （(0,3,0)，不在媒体查询里）。这里前缀多了 `html.aa-js` → (0,4,0)， 必然取胜，不需要 !important。媒体查询本身不提供权重（约定 41）， 能赢**只因为前缀更长**。 ★ 抽屉里的菜单项与标题同属 `.MenuList` 直接子元素，`dl{float:none}` 那条已经管到它们，这里只需把 `display` 打开。 */ html.aa-js .MainMenuBox .MenuList .aa-nav-sec{ display:block; } /* 抽屉里每组的**第一项**不要顶着一个上边框 —— 上面紧跟着组标题， 两条线叠在一起像误画的多余分隔线。 */ html.aa-js .MainMenuBox .MenuList .aa-nav-sec + dl > dt > span > a{ border-top:0; } /* 搜索提交按钮：原站 90×42，差 2px 不到 44 —— 手机上够不着 */ .Logo_Search .search .submit input{ min-width:var(--aa-tap); min-height:var(--aa-tap); box-sizing:border-box; } /* ---- 6. 页脚：6 列 → 3 列 ---- */ .Footer .PartnerBox .Partner{ display:flex; flex-wrap:wrap; gap:var(--aa-s4); } .Footer .PartnerBox .Partner ul{ flex:1 1 calc(33.333% - var(--aa-s3)); min-width:0; } /* ---- 7. 礼品页商品表（.Showlist_box）---- 结构：`` + 3×`
`，每格 120×120 图 + 标题。 表格默认**不能窄于 min-content**（图 120px + 不换行的标题）， 所以在 350px 容器里被硬撑到 879px → 横向溢出。 `table-layout:fixed` 允许列宽被压缩到容器以内。 */ .Showlist_box > table{ table-layout:fixed; width:100%; } .Showlist_box > table td{ width:auto; word-break:break-word; } /* ---- 8. 移动端会员入口（header.php 的 .aa-member-m）---- ★ 必须给 min-height：原来只给了 min-width，768px 那档实测 44×17 —— 宽够了但高只有 17px，比宽不达标还难点。用 inline-flex 垂直居中。 */ .aa-member-m > a{ display:inline-flex; align-items:center; justify-content:center; min-width:var(--aa-tap); min-height:var(--aa-tap); padding-left:var(--aa-s2); padding-right:var(--aa-s2); box-sizing:border-box; } /* ---- 9. 表单控件字号 ≥16px ---- iOS Safari 在聚焦「字号 <16px」的输入框时会**自动放大整个页面**， 放大后不会自己缩回去，页面就废了。原来这条只写在 ≤767px， 但 768px 的 iPad 竖屏同样会触发，实测那一档报了 1~3 个 14px/13px 的控件。 ⚠ 不要用 `input[type="text"]` 去匹配：原站有一批 `` **根本没写 type 属性**（如 bbs 留言表单 `div.PostComment > .cont > form > .title > input`）， 属性选择器匹配不到它们，所以之前一直漏。这里改用 `input:not([type=submit]):not([type=button])…` 反选。 */ .Logo_Search .search .keyword input, .aa-searchform input:not([type="submit"]):not([type="button"]), .PostComment input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .PostComment textarea, .comment-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .comment-form textarea, #comment_username, #comment_content{ font-size:var(--aa-f-lg); box-sizing:border-box; } /* 404 页 / 搜索页的内联搜索表单：按钮 32×23，点不中 */ .aa-searchform input[type="submit"], .aa-searchform .submit input{ min-width:var(--aa-tap); min-height:var(--aa-tap); box-sizing:border-box; } /* ---- 10. 面包屑 #nav_guide ---- 原站 `#nav_guide{width:1200px; height:40px; overflow:hidden}`。 窄屏下面包屑文字（如「首页 -> 「书画」的搜索结果」）会折成两行， 40px 的固定高度把第二行**整个裁掉**（实测裁掉 40px）。 `height:auto` + 保留 `overflow:hidden` 即可：overflow:hidden 会建立 BFC， 把里面两个 float 子元素一起包住，高度随内容增长。 */ #nav_guide{ height:auto; min-height:40px; line-height:1.6; padding-top:var(--aa-s1); padding-bottom:var(--aa-s1); } /* ---- 11. 右下角浮动挂件 `.topUpCont`（在线客服 / 回到顶部 / 微信二维码）---- `foot.css` 里是个 60×180 的固定列（`position:fixed; right:0`）， 三项都是**靠 `:hover` 才弹出**说明面板。触屏没有 hover，所以： · `li.kefu` 的 QQ 链接 `uin=` 是空的（死链），点了没反应； · `li.topUpWx` 的二维码面板永远弹不出来 —— 两项纯占位； · 但整个 60px 宽的列**常驻覆盖在正文右缘**：320px 下 `.wrap` 内容盒 只有 300px，它吃掉 50px（16%），每一页、每一屏都压着字。 → 只留真正可用的「回到顶部」，收成右下角 60×60 角标。 ⚠ `foot.css` 是页脚内联输出、排在全部样式之后，同权重我们必输 → 必须带 `body` 前缀（(0,1,1) 压 (0,1,0)），媒体查询本身不加权重。 */ body .topUpCont{ height:60px; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); } body .topUpCont:before{ height:60px; } body .topUpCont ul li.kefu, body .topUpCont ul li.topUpWx{ display:none; } body .topUpCont .topBack div{ display:none; } } /* =========================================================================== * ≤767px —— 手机 —— 单列 + 卡片化（用户优先级最高的一档） * ========================================================================= */ @media (max-width:767px){ /* ---- 1. 页脚：3 列 → 2 列 ---- */ .Footer .PartnerBox .Partner ul{ flex:1 1 calc(50% - var(--aa-s2)); } .Footer .PartnerBox .Partner ul.Ewm{ flex:1 1 100%; } .Footer .CopyrightBox .Copyright{ font-size:var(--aa-f-xs); line-height:1.8; text-align:center; } /* ---- 2. 触控目标兜底：所有可点元素 ≥44px ---- ⚠ `.MainMenuBox .MenuList` 里是 `dl > dt > span > a`，没有 li。 有 JS 时抽屉规则（≤991px 那档）已经给了 44px；这条主要管 「无 JS 时导航退化成横滑列表」的情况。 ⚠ `.Logo_Search .MoreAct li a` **不在**这个列表里： 它在 ≤991px 那档已经改成了 `flex-direction:column`（图标在上、文字在下）， 这里的 `align-items:center`（横向居中）会把它改回单行，与 `padding-top:52px` 叠加后高度爆掉 → 被 `li` 裁切。 */ .MainMenuBox .MenuList a, .ShowPage a, .Side .ListSort li a, .Side .ListHot li dl dd a, .HeaderTop .TopMember a, .Footer .PartnerBox .Partner ul li a{ min-height:var(--aa-tap); display:flex; align-items:center; } /* 列表正文里的标题链接不强制 44px（否则行距炸开），只保证 ≥40px 命中区 */ .ArticLists li dl dd h3 a{ min-height:40px; } }