/* ===================================================================== 移动端响应式样式 mobile.css 说明：本文件所有规则都包在 @media 媒体查询内， 只在"屏幕宽度 ≤ 断点"时生效，PC 端（宽度 > 1024px）完全不会命中， 因此 PC 站样式（style.css）原样不变。 加载位置：各页面 在 style.css 之后引入本文件， 动态模板 / 根 index.html / 静态 html/ 页均已批量注入。 注意：style.css 里大量布局类写死了固定宽度（.head 1158 / .main1 1200 / .g_box4 624 / .link 1200 / .g_box1 ul 598 …），此处逐一用 !important 覆盖为流式宽度，是"页面很乱"的核心修复点。 ===================================================================== */ /* ============ 平板及以下：流式化 + 汉堡导航（≤1024px） ============ */ @media only screen and (max-width: 1024px) { /* 全局盒模型，避免 padding 撑破宽度 */ *, *::before, *::after { box-sizing: border-box; } /* 终极兜底：禁止任何元素超出视口宽度（彻底消灭横向滚动/错位）。 固定宽度的块级元素会被约束在父级 100% 内，垂直方向不受影响。 */ * { max-width: 100% !important; } html, body { width: 100% !important; overflow-x: hidden; } /* —— 所有固定宽度容器 -> 100%（类选择器 + 内联属性选择器双保险）—— */ .head, .main1, .main2, .left_1, .right_1, .weizhi, .g_box1, .g_box2, .g_box3, .g_box4, .g_box6, .g_box7, .b_box1, .b_box3, .b_box4, .b_box6, .b_box8, .link, .top .warp, div[style*="width:1200px"], div[style*="width:1198px"], div[style*="width:1170px"], div[style*="width:1158px"] { width: 100% !important; max-width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 10px !important; padding-right: 10px !important; } /* 子容器固定宽度也放开（否则会溢出父级 100%） */ .g_box1 ul, .g_box4 { width: 100% !important; } /* —— 固定高度 -> 自适应，避免内容被裁切（overflow:hidden 原样裁切）—— */ .g_box1, .g_box2, .g_box6, .b_box8 li, div[style*="height:586px"], div[style*="height:325px"] { height: auto !important; overflow: visible !important; } /* 浮动清理：所有双栏/三栏块变为单列堆叠 */ .fl, .fr { float: none !important; } #starlist li, #starlist li a { float: none !important; } /* 媒体与表格自适应 */ img, video, iframe, embed, object, table { max-width: 100% !important; height: auto !important; } table { width: 100% !important; } .list2 li img, .b_box8 li img { max-width: 100% !important; height: auto !important; } /* ===================== 头部：logo + 搜索 ===================== */ /* 移动端全站去掉 logo 与搜索（首页 / 列表页 / 内容页统一隐藏，导航条保留） 注：.head 仅存在于 header.html，且只包裹 logo + search，隐藏不影响其他内容。 PC 端不进此媒体查询，样式完全不变。 */ .head { display: none !important; } .logo { float: none !important; width: 100% !important; text-align: center; } .logo img { max-width: 220px !important; height: auto !important; } .search { float: none !important; width: 100% !important; } .search .share { float: none !important; text-align: center; font-size: 14px; line-height: 1.6; } .search form { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; } .xl_text, .input_text { float: none !important; width: auto !important; flex: 1 1 40% !important; text-indent: 0.5em; } .input_submit { float: none !important; width: auto !important; flex: 1 1 40% !important; letter-spacing: 0; text-indent: 0; } /* ===================== 顶部导航：站点名 + 汉堡 ===================== */ .topnav { position: relative !important; min-height: 44px !important; padding: 0 10px !important; } /* 站点名（正常显示，不再 fixed 盖内容） */ .topnav h2:not(#mnavh) { display: block !important; position: static !important; height: 44px !important; line-height: 44px !important; font-size: 14px !important; font-weight: normal !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 72% !important; } /* 汉堡按钮（PC 端 display:none，此处强制显示并定位到右上角） */ #mnavh { display: block !important; position: absolute !important; right: 0 !important; top: 0 !important; width: 56px !important; height: 44px !important; background: transparent !important; max-width: none !important; overflow: visible !important; } /* 收起态：整条导航隐藏 */ nav { display: none !important; width: 100% !important; line-height: normal !important; } .topnav.nav-open nav { display: block !important; } nav #starlist { display: none !important; width: 100% !important; margin: 0 !important; background: #023d7f !important; float: none !important; } .topnav.nav-open nav #starlist { display: block !important; } #starlist li { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; } #starlist li a { display: block !important; float: none !important; padding: 13px 15px !important; font-size: 15px !important; color: #fff !important; } /* 二级菜单：PC 端 hover 绝对定位，手机端改为平铺、默认收起 */ #starlist ul.sub { position: static !important; display: none !important; width: 100% !important; background: #012a57 !important; padding: 0 !important; } /* 触屏无 hover，强制覆盖 PC 的 :hover 展开 */ #starlist li:hover ul.sub { display: none !important; } #starlist li.open-sub ul.sub { display: block !important; } #starlist ul.sub li { border-bottom: none !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } #starlist ul.sub li a { padding: 11px 15px 11px 32px !important; font-size: 14px !important; } /* ===================== 有子菜单的项：右侧箭头标记 ===================== */ /* .has-sub 由 mobile_nav.js 自动打在"含 ul.sub 的 li"上； 展开时 JS 再叠加 .open-sub，箭头旋转 90° 朝下。 箭头用 CSS 边框三角形绘制（不依赖字体，各机型渲染一致）。 PC 端不进此媒体查询，导航外观保持原样。 */ /* 给箭头腾出右侧空间，并作为箭头的定位基准 */ #starlist li.has-sub > a { position: relative !important; padding-right: 38px !important; } /* 收起态：向右的三角 */ #starlist li.has-sub > a::after { content: ""; position: absolute; right: 16px; top: 50%; margin-top: -4px; width: 0; height: 0; border-left: 5px solid rgba(255, 255, 255, 0.85); border-top: 4px solid transparent; border-bottom: 4px solid transparent; -webkit-transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; pointer-events: none; } /* 展开态：旋转 90° 变成向下 */ #starlist li.has-sub.open-sub > a::after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } /* ===================== 首页专属（仅移动端生效，PC 样式不变） ===================== */ /* 1) 首页去掉「本周推荐」整块 .g_box6 仅在 index.html 出现一次，隐藏不影响列表页/内容页 */ .homepage .g_box6 { display: none !important; } /* 2) 新闻中心 / 教育培训 / 学术研究：只保留中间推荐区块 g_box4， 隐藏左侧列表块与右侧「热门文章」块——两者都是 .g_box3 （新闻中心=去掉左侧+热门文章；学术研究=去掉两侧；教育培训同理） */ .homepage .main2 .g_box3 { display: none !important; } /* 中间推荐区块：去掉 PC 左右分隔线，单列后更干净 */ .homepage .main2 .g_box4 { border-left: none !important; border-right: none !important; } /* 3) 推荐区块标题字号与「今日焦点」推荐文章标题一致 PC：.g_box1 h1 = 18px（今日焦点）、.g_box4 h3 = 20px（推荐区块） 移动端统一为 18px，并解除固定行高裁切，避免手机上长标题被截断 */ .homepage .g_box4 h3, .homepage .g_box4 h3 a { font-size: 18px !important; line-height: 1.4 !important; height: auto !important; overflow: visible !important; text-align: left !important; padding-top: 6px !important; } /* 今日焦点标题同样解除裁切，与推荐区块视觉保持一致 */ .homepage .g_box1 h1, .homepage .g_box1 h1 a { font-size: 18px !important; line-height: 1.4 !important; height: auto !important; overflow: visible !important; text-align: left !important; } /* 中间推荐区块的图文条目：手机上左图右文改为上下堆叠 */ .homepage .main2 .b_box8 li { width: 100% !important; float: none !important; margin-bottom: 12px !important; } .homepage .main2 .b_box8 li img { width: 100% !important; height: auto !important; float: none !important; margin: 0 0 6px 0 !important; } /* —— 例外：学术研究栏目的「专家」保持 PC 布局：照片在左、介绍在右 —— 该栏目 .b_box8 里是专家（头像 + 姓名 + 学会职务/工作单位）， 上下堆叠会浪费空间且不像"专家名片"，故还原为左图右文。 作用域靠 .xueshu 类（已加在第 3 个 .main2 上：模板 + 根静态 index.html）。 选择器写作 .main2.xueshu（4 个类层级），优先级高于上面的堆叠规则，不依赖书写顺序。 尺寸按 130x95 等比缩到 110x80，间距沿用 PC 的 10px。 */ .homepage .main2.xueshu .b_box8 li { overflow: hidden !important; /* 形成 BFC 包住浮动图片，避免文字串位 */ margin-bottom: 10px !important; } .homepage .main2.xueshu .b_box8 li img { float: left !important; width: 110px !important; height: 80px !important; margin: 0 10px 6px 0 !important; padding-right: 0 !important; object-fit: cover !important; border-radius: 3px !important; } /* 专家简介文字：贴着照片右侧，不跑到图片下方 */ .homepage .main2.xueshu .b_box8 li h4 { height: auto !important; line-height: 1.4 !important; font-size: 15px !important; overflow: visible !important; margin: 0 0 4px !important; } .homepage .main2.xueshu .b_box8 li p { font-size: 13px !important; line-height: 1.6 !important; word-break: break-word; } /* 会员查询等移到「广告通栏（main1 上方的横幅）」之下： 用 flex 排序把 right_1 排到 main1 最前，PC 端不影响（PC 不进此媒体查询）。 */ .homepage .main1 { display: flex !important; flex-direction: column !important; } .homepage .main1 > .right_1 { order: 1 !important; } .homepage .main1 > .g_box6 { order: 2 !important; } .homepage .main1 > .g_box1 { order: 3 !important; } .homepage .main1 > .clear { display: none !important; } /* 会员查询链接：2 列网格，去掉原内联间隔 */ .home-links { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 6px !important; } .home-links > div { margin: 0 !important; } .home-links > div:empty { display: none !important; } .home-links img { width: 100% !important; height: auto !important; display: block !important; } /* ===================== 详情/列表标题与图片尺寸微调 ===================== */ /* 详情页标题：缩小、留边、自动换行 */ .g_con h1 { font-size: 19px !important; line-height: 1.4 !important; margin: 10px 0 12px !important; padding: 0 10px !important; word-break: break-word; } /* 列表页标题 + 缩略图 */ .list2 li { overflow: hidden !important; margin-bottom: 12px !important; } .list2 li h3, .list2 li h3 a { font-size: 15px !important; line-height: 1.5 !important; margin: 0 0 4px !important; word-break: break-word; } .list2 li img.dis { width: 96px !important; height: 68px !important; float: left !important; margin: 0 10px 6px 0 !important; object-fit: cover !important; border-radius: 3px !important; } /* 头条大标题缩小 */ .jrtt { padding: 8px 10px !important; } .jrtt h2, .jrtt h2 a { font-size: 17px !important; line-height: 1.4 !important; } /* ===================== 单页（关于学会等）：左侧子菜单抽屉 ===================== */ /* 适用：.main1 > .page > [.page-title(子菜单) + .page-box(内容)] 按钮 / 遮罩 / 关闭按钮由 mobile_nav.js 动态插入，PC 端由文件末尾的 min-width:1025px 规则强制隐藏，故 PC 布局零影响。 */ /* —— 内容区满屏 + 左右各 5px 缝隙 —— .main1 在移动端带 10px 内边距，用负外边距抵掉后， 再由 .page-box 给出左右各 5px，最终距屏幕边缘正好 5px。 */ .page { padding: 0 !important; margin-left: -10px !important; margin-right: -10px !important; overflow: visible !important; /* 关键：必须解除全局 `* { max-width:100% }` 的卡口。 否则 .page 宽度被限制为 .main1 内容宽度（视口-20px），而负边距又把它左移， CSS 过度约束时会把「右边距」重算成 +10px —— 结果内容变成 左 5px / 右 25px，整篇文章明显偏左（2026-09-04 修复）。 解除后 .page 宽度才等于视口宽度，配合 .page-box 左右各 5px，两侧真正对称。 */ max-width: none !important; } .page-box { width: 100% !important; float: none !important; margin-left: 0 !important; padding-left: 5px !important; padding-right: 5px !important; border-left: none !important; min-height: 0 !important; } /* 正文小标题前的蓝色竖条：原 left:-32px 会被 5px 窄边距切掉，改为贴左 */ .page-box-content h2, .page-box-content h3, .page-box-content h4, .page-box-content h5, .page-box-content h6 { padding-left: 12px !important; } .page-box-content h2:before, .page-box-content h3:before, .page-box-content h4:before, .page-box-content h5:before, .page-box-content h6:before { left: 0 !important; } /* —— 子菜单 -> 左侧抽屉：默认藏在屏幕左侧之外 —— */ .page-title { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 220px !important; max-width: 78% !important; float: none !important; margin: 0 !important; padding: 56px 12px 20px !important; background: #fff !important; box-shadow: 2px 0 14px rgba(0, 0, 0, 0.18) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; z-index: 9999 !important; transform: translateX(-100%) !important; transition: transform 0.28s ease !important; } /* 打开：向右滑出 */ body.page-menu-open .page-title { transform: translateX(0) !important; } /* 抽屉右上角关闭按钮（JS 插入） */ .page-drawer-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; line-height: 30px; text-align: center; font-size: 24px; color: #666; background: #f5f5f5; border-radius: 50%; cursor: pointer; z-index: 2; } /* —— 左边缘"标志"按钮（JS 插入）：竖排文字，垂直居中 —— */ .page-menu-btn { position: fixed; left: 0; top: 50%; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 5px; background: #023d7f !important; color: #fff !important; font-size: 12px; line-height: 1.2; border-radius: 0 6px 6px 0; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2); cursor: pointer; z-index: 9997 !important; transform: translateY(-50%); transition: opacity 0.28s ease; user-select: none; -webkit-user-select: none; } .page-menu-btn .pm-bars { font-size: 18px; line-height: 1; } .page-menu-btn .pm-txt { writing-mode: vertical-rl; letter-spacing: 2px; } /* 抽屉展开时按钮淡出，避免与抽屉重叠（不依赖抽屉宽度，各机型通用） */ body.page-menu-open .page-menu-btn { opacity: 0; pointer-events: none; } /* —— 遮罩层（JS 插入）—— */ .page-menu-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 9998 !important; display: none; } body.page-menu-open .page-menu-mask { display: block; } } /* ============ 手机：字号 / 间距微调（≤768px） ============ */ @media only screen and (max-width: 768px) { body { font-size: 14px !important; } .t_1, .t_2, .t_3 { width: 100% !important; font-size: 16px !important; } .t_4 h3 { font-size: 16px !important; } .b_box3 li, .b_box1 li, .list2 li, .b_box8 li { line-height: 1.9 !important; font-size: 14px !important; } .weizhi { font-size: 13px !important; padding: 8px 10px !important; } /* 正文排版：字号加大、自动换行，避免横向溢出 */ .content, .show_content, .con, .g_con, .TRS_Editor, .article-con, .news-con, .v_news_content { font-size: 16px !important; line-height: 1.85 !important; word-break: break-word; } p, li { word-break: break-word; } /* 轮播 / 横幅图（冗余保险） */ .swiper-container, .swiper, #pub_slideplay, .dk_slideplayer, .banner { width: 100% !important; } .banner img { width: 100% !important; height: auto !important; } /* 页脚 */ .foot { padding: 15px 10px !important; text-align: center; font-size: 12px; line-height: 1.9; } .foot p { margin: 4px 0; word-break: break-all; } /* 回到顶部按钮：缩小并贴角 */ .cd-top { right: 10px !important; bottom: 10px !important; width: 40px !important; height: 40px !important; } } /* ============ PC 端保险：单页抽屉组件一律不显示（PC 布局完全不变） ============ .page-menu-btn / .page-menu-mask / .page-drawer-close 三个节点由 mobile_nav.js 在运行时插入，PC 端同样会插入，故此处显式隐藏， 确保 PC 站视觉与改造前 100% 一致。 */ @media only screen and (min-width: 1025px) { .page-menu-btn, .page-menu-mask, .page-drawer-close { display: none !important; } }