/* ============================================================ * KXC-FIX(2026-08-22) PC 主题窄屏兜底 * * 症状：桌面 UA 下把窗口收到 1200px 以内，页面右侧内容被直接切掉， * 而且 html/body 都是 overflow-x:hidden —— 不出横向滚动条，用户 * 根本够不着被切掉的部分。小笔记本、iPad 横屏、分屏、开着侧边栏 * 浏览的用户都会中招。 * * 根因（查出来是一行被复制了 7 遍）：2026-06/07 改版的每张样式表， * 页面根元素上都写了 min-width:1200px —— * .home-ui-page / .contact-page / .ppwh-page / .ryzz-page * body:has(.gfjw-page) / body:has(.media-news-page) * body:has(.pc-product-center) * 按 CSS 规范 min-width 压过 max-width，所以整条后代链的百分比 * 都照着这 1200px 算。只给容器加 max-width:100% 是没用的：首页实测 * 92 个越界元素只掉到 91 个。必须先把根上的 min-width 归零。 * * 1009px 视口实测（被裁且滚不到的元素个数，修前 -> 修后）： * / 92 -> 0 /lxwm.html 29 -> 0 * /ryzz.html 40 -> 0 /kxcyr.html 10 -> 0 * /list-157.html 29 -> 0 /gfjw.html 6 -> 0 * /ppwh.html 2 -> 0 /113-819.html 0 -> 0 * * 本层只在 1260px 以下生效，宽屏排版一点不受影响。 * 必须排在各页面样式表之后加载（见 Contents/footer.php）， * 因为几处是同属性、同特异性，靠先后顺序决胜。 * ============================================================ */ @media (max-width: 1260px) { /* --- 1) 根上的 min-width:1200px 归零，容器链才塌得下来 --- * 只动这 7 个根，不做通配 —— 页内还有 min-width:122px 之类 * 给按钮/标签用的合理值，一刀切会把它们一起清掉。 */ .home-ui-page, .contact-page, .ppwh-page, .ryzz-page, body:has(.gfjw-page), body:has(.media-news-page), body:has(.pc-product-center) { min-width: 0; } /* --- 2) 定宽容器退化为"不超过父级" --- * width:1200px 与 max-width:100% 不是同一个属性，不存在平局， * 直接取两者较小值。 */ [class^="home-"], [class*=" home-"], [class^="media-"], [class*=" media-"], [class^="ryzz-"], [class*=" ryzz-"], [class^="contact-"], [class*=" contact-"], [class^="kxcyr-"], [class*=" kxcyr-"], [class^="gfjw-"], [class*=" gfjw-"], [class^="ppwh-"], [class*=" ppwh-"], [class^="list157-"], [class*=" list157-"], [class^="pc-product-"], [class*=" pc-product-"] { max-width: 100%; box-sizing: border-box; } /* --- 3) 横向滚动的轨道必须保持超宽，否则滑不动 --- */ .ryzz-slider-track, .ryzz-slider-viewport > *, [class$="-track"], [class*="swiper-wrapper"], [class*="ms-slide"], .mk-container > ul { max-width: none; } /* --- 4) 主容器留出左右留白，内容别贴着屏幕边 --- */ .home-container, .home-hero-inner, .media-wrap, .ryzz-wrap, .contact-wrap, .kxcyr-title, .kxcyr-career-stage, .kxcyr-dots, .gfjw-hero__inner, .gfjw-title, .gfjw-team__grid { padding-left: 16px; padding-right: 16px; } /* --- 5) 会撑破的网格补上可压缩下限 --- * 首页那几个网格用的是 minmax(0,1fr)，本来就压得下去，不用动。 * 这两个是裸 1fr（= minmax(auto,1fr)），有 min-content 下限，会撑破容器。 */ .ryzz-culture-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gfjw-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* --- 6) 挂在容器外侧的绝对定位元素，收回屏幕内 --- */ /* 杨冉页轮播箭头原本 left/right:-72px 挂在容器外，窄屏会掉出视口 */ .kxcyr-prev { left: 6px; } .kxcyr-next { right: 6px; } /* 荣誉页/品牌页 hero 视觉图原本 right:-12px 故意出血，窄屏收平 * （ppwh 自己的 760px 断点已有同样处理，这里补上中间宽度这一段） */ .ryzz-hero-visual, .ppwh-hero-visual { right: 0; } } /* ============================================================ * 以下是 900px 以下的补充。桌面 UA 下真正会走到这一段的，是 * 分屏/侧边栏这类很窄的桌面窗口（真手机走的是 m_web 模板）。 * ============================================================ */ @media (max-width: 1080px) { /* 首页底部"专业肌肤顾问"咨询条：原本 5 条固定轨道 * 120px 250px 1fr 210px 100px + 4 个 18px 间距 = 至少 752px， * 比窄屏视口还宽，电话和"立即咨询"按钮会被顶出屏幕。 * 这条是 position:fixed 的浮动条，必须自己塞进视口。 * 改成可换行的 flex，宁可折行也不藏内容 —— 电话和 CTA 是转化入口。 */ .home-consult-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; } .home-consult-inner > * { flex: 0 1 auto; } .home-consult-points { display: flex; gap: 18px; } /* 首页 6 步流程：gap 有 82px，光间距就吃掉 410px， * 625px 视口下每列只剩 30px，而 li 内部图标列固定 82px，必然撑破。 */ .home-process-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* 换行之后步骤之间的连接箭头会指向空处，隐掉 */ .home-process-list li:after { display: none; } } @media (max-width: 1000px) { /* 顶部导航 8 个一级栏目单行需要 649px，但窄屏下 * 扣掉 logo(132) 和右侧搜索区(160) 只剩 405px —— 单行放不下是必然的。 * header 是 position:sticky 且在正常流里，长高只会把正文往下推、 * 不会盖住内容，所以让它换成两行：第一行 logo + 搜索，第二行整排导航。 * 全部带 !important 是因为 kxc-nav-unified.css 那边也是 !important。 */ .header, header.header { height: auto !important; min-height: 0 !important; } .header .com-width, header.header .com-width { height: auto !important; min-height: 0 !important; flex-wrap: wrap !important; row-gap: 0 !important; padding-top: 6px !important; padding-bottom: 4px !important; } .header .nav-list, header.header .nav-list, .header .gr-nav, header.header .gr-nav { order: 9 !important; flex: 1 0 100% !important; justify-content: center !important; flex-wrap: wrap !important; height: auto !important; } .header .nav-list > li, header.header .nav-list > li, .header .gr-nav > li, header.header .gr-nav > li { height: auto !important; } .header .nav-list > li > a, header.header .nav-list > li > a, .header .gr-nav > li > a, header.header .gr-nav > li > a { padding: 0 9px !important; height: 42px !important; line-height: 42px !important; } } @media (max-width: 900px) { /* 顾问头像是装饰性的，最窄档让位给文字和转化入口 */ .home-consult-person { display: none; } .home-process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } /* 降列用固定列数，不用 auto-fit —— * auto-fit 会把 5 个商品排成 4+1 留个孤儿，比挤一点更难看。 */ .home-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-problem-series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-moment-grid { grid-template-columns: minmax(0, 1fr); } .ryzz-culture-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gfjw-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 左右分栏改为上下堆叠 */ .home-video-layout, .home-brand-layout, .contact-main, .contact-lower, .ryzz-story-inner, .ryzz-philosophy-inner { display: block; } .home-video-layout > *, .home-brand-layout > *, .contact-main > *, .contact-lower > *, .ryzz-story-inner > *, .ryzz-philosophy-inner > * { width: auto; max-width: 100%; } } /* ============================================================ * 旧版商品详情页（show_product.php + style.css） * * 它没参与 2026-06/07 那轮改版，用的还是 .left / .right / .com-width * 这套老类名，所以不在上面那批类名前缀的覆盖范围里。 * 1009px 下还好，再窄就散了：885px 裁 1 个，753px 裁 14 个 —— * 整个商品描述栏（.product-detail 那一列）被切掉。 * * 关键点：.left / .right / .com-width / .bd / .item 这些类名太通用， * 全站到处都在用，绝不能不加限定就改。全部用 * body:has(.product-detail-header) 把作用域钉死在这个页面上。 * * 另一个坑：.bd 和 .item 上的 width:740px 是 tab 插件在运行时写的 * 内联样式（它按原始布局量完就写死了），CSS 选择器再精确也盖不过内联 * width。但 max-width 是另一个属性、不比特异性，照样能把它钳回来。 * 站里本来就有一条 .product-detail .bd .item{position:static!important} * 在跟同一个插件较劲，是一样的路数。 * ============================================================ */ @media (max-width: 1260px) { body:has(.product-detail-header) .com-width { width: auto; max-width: calc(100% - 24px); } body:has(.product-detail-header) .product-detail-body .left { width: auto; max-width: 100%; min-height: 0; box-sizing: border-box; } body:has(.product-detail-header) .product-detail-body .right { width: auto; max-width: 100%; box-sizing: border-box; } body:has(.product-detail-header) .prodPic { width: auto; max-width: 100%; } /* 钳住插件写死的内联宽度 */ body:has(.product-detail-header) .product-detail .bd, body:has(.product-detail-header) .product-detail .bd .item, body:has(.product-detail-header) .product-detail .bd .item > * { max-width: 100%; } /* 正文里的表格宽度不可控，给它自己的横向滚动条，别撑破页面 */ body:has(.product-detail-header) .product-detail table { display: block; overflow-x: auto; max-width: 100%; } } @media (max-width: 1000px) { /* 两栏（.left 840px + .right 600px）放不下，改上下堆叠 */ body:has(.product-detail-header) .product-detail-body .left, body:has(.product-detail-header) .product-detail-body .right { float: none; width: auto; max-width: 100%; position: static; left: auto; } body:has(.product-detail-header) .product-detail-body .left { padding: 15px 20px 30px; } body:has(.product-detail-header) .product-detail-header .product-des, body:has(.product-detail-header) .prodPic { float: none; width: auto; max-width: 100%; } body:has(.product-detail-header) .prodPic .big, body:has(.product-detail-header) .prodPic .big .box { width: auto; max-width: 100%; } } /* ============================================================ 文章正文里的视频（2026-08-22） 后台编辑器新增了"插入视频"，正文里会出现