/* ======================================================= 鸦舍 / Crowxjy — 移动端响应式叠加层 (mobile.css) v18.12 — PC-first responsive overlay 设计原则: 1. 全部规则在 @media (max-width: 768px) 之内,不影响 PC 2. 仅做"尺寸/间距/字号"调整,不做布局结构覆盖 3. !important 仅用于必须打破 PC 的尺寸/对齐场景 4. 触摸目标 ≥44px,iOS 输入字号 ≥16px 防缩放 5. 排版基线: 正文 17px / 行高 1.6 / 网格 8px 全局规则(PC 也生效但视觉无影响): - [hidden] 强制隐藏(修 utility class) - overflow-x: clip(防横向溢出,不破坏 sticky) ======================================================= */ /* ============================================================ 0. 全局兜底 — PC 也生效,但视觉无影响 ============================================================ */ [hidden] { display: none !important; } html, body { max-width: 100%; overflow-x: clip; /* 兼容 sticky;不支持 clip 时走下方 fallback */ } @supports not (overflow-x: clip) { html { overflow-x: visible; } body { overflow-x: hidden; } } img, video, iframe, svg, canvas, picture, embed, object { max-width: 100%; height: auto; } /* —— 移动端单图标语言切换器:PC 端默认隐藏 —— 尺寸与 .nav-theme-toggle 在移动端的尺寸保持完全一致(40×40 / icon 22px) */ .lang-toggle-mobile { display: none; /* PC 不显示,由 ≤768px 显示 */ align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: rgba(var(--washi-rgb), .5); cursor: pointer; box-sizing: border-box; flex: 0 0 auto; /* 防止被 flex 父容器拉伸 */ transition: color .25s var(--ease-out, ease), border-color .25s var(--ease-out, ease); } .lang-toggle-mobile:hover { color: var(--shu); border-color: var(--shu); } .lang-toggle-mobile__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; } /* 根据显示对应图标(同时只有一个可见) */ .lang-toggle-mobile__icon[data-lang-icon="en"] { display: none; } body[data-lang="en"] .lang-toggle-mobile__icon[data-lang-icon="zh"] { display: none; } body[data-lang="en"] .lang-toggle-mobile__icon[data-lang-icon="en"] { display: inline-flex; } .lang-toggle-mobile__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ============================================================ 1. 移动端 Token + 排版基线 (≤768px) ============================================================ */ @media (max-width: 768px) { :root { /* 横向边距 */ --m-gutter: 24px; --m-gutter-tight: 16px; /* 字号 (modular scale 1.25,基于 17px) */ --m-fs-body: 17px; --m-fs-small: 14px; --m-fs-caption: 13px; --m-fs-h3: 20px; --m-fs-h2: 26px; --m-fs-h1: 32px; --m-fs-hero: 40px; /* 行高 */ --m-lh-body: 1.6; --m-lh-tight: 1.3; --m-lh-heading: 1.2; /* 间距 (8px 网格) */ --m-space-2: 8px; --m-space-3: 12px; --m-space-4: 16px; --m-space-5: 24px; --m-space-6: 32px; --m-space-7: 48px; /* 卡片 */ --m-radius: 10px; --m-radius-sm: 6px; --m-card-pad: 20px; } body { word-break: break-word; overflow-wrap: anywhere; font-size: var(--m-fs-body); line-height: var(--m-lh-body); } /* 防容器塌缩 */ .hero, .portfolio, .experience, .contact, .detail__content, .detail-blocks, .resume-cover, .resume-timeline { min-width: 0; } /* bleed 容器在小屏归零 */ [class*="bleed-"] { margin-left: 0; margin-right: 0; width: 100%; } /* 表单防 iOS 缩放 */ input, textarea, select { font-size: 16px; } } /* ============================================================ 2. Header + Bottom Tab Bar — 移动端 App 化布局 · Header:单行 [logo | lang-toggle | theme-toggle] · Nav :脱离 header,position: fixed 落到底部当 tab bar (iOS HIG / Material 3 BottomNavigation 通用模式) · 必须覆盖 styles.css 960px 的 grid-row:2 / grid-column:1/-1 ============================================================ */ @media (max-width: 768px) { /* —— 留底部空间,避免内容被 tab bar 遮挡 —— */ body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .site-header { padding: 10px 16px; gap: 10px; /* 单行布局:不再需要 grid-row 2 */ grid-template-rows: auto; } .brand { gap: 8px; } .brand__avatar { width: 28px; height: 28px; } .brand__seal { font-size: 18px; } .brand__name { font-size: 13px; letter-spacing: .08em; font-weight: 600; } /* —— 隐藏 PC 文字 lang-switch,显示单图标 —— */ .lang-switch { display: none; } .lang-toggle-mobile { display: inline-flex; grid-row: 1; grid-column: 2; /* 占据 PC lang-switch 原位 */ } /* —— 主题切换按钮:在移动端统一为 40×40, 必须显式覆盖 styles.css 的 34×34 + pointer:coarse 的 min-height:44 —— */ .nav-theme-toggle { width: 40px !important; height: 40px !important; min-height: 40px !important; min-width: 40px; box-sizing: border-box; flex: 0 0 auto; padding: 0; } .nav-theme-toggle svg { width: 22px; height: 22px; } /* —— 主导航变成底部 Tab Bar —— */ .nav { position: fixed; bottom: 0; left: 0; right: 0; /* 覆盖 styles.css 960px 的 grid-row:2 / grid-column:1/-1 */ grid-row: auto; grid-column: auto; display: flex; gap: 0; padding: 0; padding-bottom: env(safe-area-inset-bottom, 0px); margin: 0; width: 100%; height: calc(64px + env(safe-area-inset-bottom, 0px)); background: rgba(var(--washi-rgb), .92); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(var(--ink-rgb), .04); z-index: 60; } .nav__link { flex: 1 1 0; min-width: 0; padding: 8px 4px 10px; min-height: 56px; text-align: center; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; color: var(--ink-mute); transition: color .2s var(--ease-out, ease); } .nav__link span { font-size: 12px; letter-spacing: .04em; font-weight: 500; line-height: 1.2; } .nav__link em { display: none; } .nav__link:hover { color: var(--ink); } /* 当前页 tab —— 顶部 3px 朱砂条 + 朱砂文字 */ .nav__link.is-active { color: var(--shu); font-weight: 600; } .nav__link.is-active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; background: var(--shu); border-radius: 0 0 3px 3px; } } /* ============================================================ 3. 首页 Hero — 给 scroll-guide 留底部空间 ============================================================ */ @media (max-width: 768px) { .hero { padding: var(--m-space-7) var(--m-gutter) 140px; } .hero__grid { grid-template-columns: 1fr; gap: var(--m-space-5); } .hero__title { font-size: var(--m-fs-hero); line-height: 1.1; letter-spacing: -.015em; margin-bottom: var(--m-space-4); } .hero__sub, .hero__lede { font-size: var(--m-fs-body); line-height: var(--m-lh-body); } .hero__cta { margin-top: var(--m-space-5); } .hero__cta { flex-direction: column; align-items: stretch; gap: var(--m-space-3); } .hero__cta .btn { width: 100%; padding: 14px 20px; font-size: 15px; text-align: center; min-height: 44px; } .hero__reul { order: -1; max-width: 280px; margin: 0 auto var(--m-space-2); } .hero__vline { display: none; } .hero__scroll { bottom: 18px; padding: 6px 10px; } .hero__scroll-track { height: 32px; } .hero__scroll-label { font-size: 10px; letter-spacing: .32em; } } /* ============================================================ 4. 首页 sections — Spotify 风横滑卡片轨 Experience / Portfolio / Sharings 在小屏均改为横向滚动关键:scroll-snap + 一屏可见 ~1.15 张卡 + 双侧 24px gutter ============================================================ */ @media (max-width: 768px) { .portfolio, .experience, .contact, .sharings { /* 横滑区左右贴边滚动,padding-y 保留,padding-x 在 section 内 */ padding-top: var(--m-space-7); padding-bottom: var(--m-space-7); } .portfolio, .experience, .sharings { padding-left: 0; padding-right: 0; } .contact { padding-left: var(--m-gutter); padding-right: var(--m-gutter); } /* —— section header 保留正常 gutter —— */ .section-header { padding: 0 var(--m-gutter); margin-bottom: var(--m-space-5); } .section-header__title, .section-title { font-size: var(--m-fs-h2); line-height: var(--m-lh-tight); margin-bottom: var(--m-space-2); } .section-header__subtitle, .section-eyebrow { font-size: var(--m-fs-caption); letter-spacing: .15em; } /* link-arrow(View Details →)在小屏入到 header 下方 */ .section-header .link-arrow { position: static; display: inline-block; margin-top: var(--m-space-3); } /* —— 通用横滑轨道:Spotify / Apple Music 模式 —— */ .exp-grid, .portfolio__grid, .portfolio-group__grid { display: flex; grid-template-columns: none; /* 覆盖 PC 的 grid 列定义 */ flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: var(--m-space-4); /* 左右 padding 让首张卡片右滑可见 24px,提示可滑动 */ padding: 4px var(--m-gutter) var(--m-space-3); scroll-snap-type: x mandatory; scroll-padding-left: var(--m-gutter); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .exp-grid::-webkit-scrollbar, .portfolio__grid::-webkit-scrollbar, .portfolio-group__grid::-webkit-scrollbar { display: none; } /* 每张卡片占视口 ~78%,留 ~18% 给下一张预览(经典 Spotify 比例) */ .exp-grid > .exp-card, .portfolio__grid > .case-card, .portfolio-group__grid > .case-card { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; scroll-snap-stop: always; } /* —— 分组容器(v18.15) —— */ .portfolio__groups { gap: var(--m-space-6); } .portfolio-group { gap: var(--m-space-3); } .portfolio-group__header { padding: 0 var(--m-gutter) var(--m-space-2); gap: 10px; } .portfolio-group__logo { width: 36px; height: 36px; border-radius: 8px; font-size: 14px; } .portfolio-group__title { font-size: var(--m-fs-h3); } .case-card__meta h4 { font-size: 16px; line-height: 1.35; } .case-card__badge { height: 17px; font-size: 9px; padding: 0 5px; } /* 卡片内部排版 */ .exp-card { padding: var(--m-card-pad); } .case-card { padding: var(--m-card-pad); } .case-card__cover { margin-bottom: var(--m-space-3); } .case-card__title { font-size: var(--m-fs-h3); line-height: var(--m-lh-tight); margin: 0 0 var(--m-space-2); } .case-card__desc { font-size: 15px; line-height: 1.55; } .case-card__meta { font-size: var(--m-fs-caption); gap: var(--m-space-2) var(--m-space-3); flex-wrap: wrap; margin-top: var(--m-space-3); } .case-card__cta { margin-top: var(--m-space-4); padding: 12px var(--m-space-4); min-height: 44px; } /* —— Sharings:PC 是双行无限 marquee,在小屏改为单行横滑 —— */ .sharings__row { display: flex; flex-wrap: nowrap; width: 100%; /* 覆盖 PC 的 width: max-content */ overflow-x: auto; overflow-y: hidden; gap: var(--m-space-3); padding: 4px var(--m-gutter) var(--m-space-3); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; /* 关闭 PC 端的 marquee 动画 */ animation: none; transform: none; will-change: auto; } .sharings__row--rtl { margin-top: var(--m-space-3); } .sharings__row > .sharing-item { flex: 0 0 78%; max-width: 320px; width: auto; /* 覆盖 PC 280px 固定值 */ height: 200px; scroll-snap-align: start; } .sharings__row::-webkit-scrollbar { display: none; } /* —— Contact 单列 —— */ .contact__list { grid-template-columns: 1fr; gap: var(--m-space-4); } .contact__item { padding: var(--m-card-pad); } } /* ============================================================ 5. Footer ============================================================ */ @media (max-width: 768px) { .site-footer { flex-direction: column; text-align: center; padding: var(--m-space-6) var(--m-gutter); gap: var(--m-space-3); } .footer__nav { flex-wrap: wrap; justify-content: center; gap: var(--m-space-3) var(--m-space-5); } .footer__nav a { font-size: var(--m-fs-small); min-height: 40px; display: inline-flex; align-items: center; } .footer__copyright { font-size: var(--m-fs-caption); } } /* ============================================================ 6. 详情页 ============================================================ */ @media (max-width: 768px) { .detail { min-height: 60vh; } .detail__loading, .detail__error { min-height: 50vh; padding: var(--m-space-7) var(--m-gutter); } .detail__loading-seal { font-size: 56px; } .detail-hero { padding: var(--m-space-6) var(--m-gutter) var(--m-space-5); } .detail-hero__inner { padding: 0; } .detail-hero__title { font-size: var(--m-fs-h1); line-height: var(--m-lh-heading); letter-spacing: -.01em; margin-bottom: var(--m-space-3); } .detail-hero__subtitle { font-size: var(--m-fs-body); line-height: var(--m-lh-body); } .detail-hero__meta { flex-wrap: wrap; gap: var(--m-space-2) var(--m-space-4); font-size: var(--m-fs-caption); margin-top: var(--m-space-4); } .detail-hero__cover { margin-top: var(--m-space-5); } .detail__content, .detail-blocks { padding-left: var(--m-gutter); padding-right: var(--m-gutter); } .detail-block { margin-bottom: var(--m-space-7); } .block-paragraph, .block-text, .block-rich { font-size: var(--m-fs-body); line-height: var(--m-lh-body); } .block-paragraph p, .block-text p { margin: 0 0 var(--m-space-4); } .block-section { margin: var(--m-space-7) 0 var(--m-space-4); } .block-section__heading { font-size: var(--m-fs-h2); line-height: var(--m-lh-tight); margin: 0 0 var(--m-space-3); } .block-quote { padding: var(--m-space-4) var(--m-space-5); font-size: 18px; line-height: 1.55; margin: var(--m-space-5) 0; } /* 12 列 grid 塌缩 */ .detail-grid, [class*="col-span-"] { display: block; } [class*="col-span-"] { grid-column: 1 / -1; } .block-2col, .block-3col, .block-4col { grid-template-columns: 1fr; gap: var(--m-space-4); } .block-gallery, .block-stats { grid-template-columns: repeat(2, 1fr); gap: var(--m-space-3); } /* TOC 横向 chips */ .detail-toc { position: static; width: 100%; overflow-x: auto; white-space: nowrap; padding: var(--m-space-2) var(--m-gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .detail-toc::-webkit-scrollbar { display: none; } .detail-toc ul, .detail-toc__list { display: inline-flex; flex-direction: row; gap: var(--m-space-2); padding: 0; margin: 0; } .detail-toc li, .detail-toc__item { flex-shrink: 0; } .detail-toc a { padding: 8px 14px; border-radius: 999px; font-size: var(--m-fs-caption); min-height: 36px; display: inline-flex; align-items: center; } .detail__pager { flex-direction: column; gap: var(--m-space-3); padding: var(--m-space-7) var(--m-gutter); } .detail__pager-link, .detail__pager-home { width: 100%; justify-content: center; min-height: 52px; padding: 14px var(--m-space-4); font-size: 15px; } } /* ============================================================ 7. 编辑器 — 三栏纵向 ============================================================ */ @media (max-width: 768px) { .book--editor { overflow: auto; height: auto; } .book--editor main.ed { display: flex; flex-direction: column; grid-template-columns: none; height: auto; } .ed__left, .ed__center, .ed__right { width: 100%; height: auto; min-height: 0; max-height: none; border: 0; border-bottom: 1px solid var(--line); } .ed__center { order: 1; min-height: 50vh; } .ed__right { order: 2; min-height: 60vh; } .ed__left { order: 3; border-bottom: 0; } .ed__panel { padding: var(--m-space-4) var(--m-gutter-tight); } .ed__add-grid { grid-template-columns: repeat(4, 1fr); gap: var(--m-space-2); } .ed__tpl-grid { grid-template-columns: 1fr 1fr; } .ed__center-head { padding: var(--m-space-3) var(--m-gutter-tight); flex-wrap: wrap; gap: var(--m-space-3); } .ed__center-tabs { flex: 1 1 100%; } .ed__center-tab { flex: 1; padding: 12px 8px; font-size: 13px; min-height: 44px; } .ed__center-actions { width: 100%; gap: var(--m-space-2); } .ed__center-actions .ed__btn { flex: 1; min-height: 40px; } .ed__tab { font-size: 12px; padding: 14px 4px; min-height: 44px; } .ed__blocks { padding: var(--m-space-3) var(--m-gutter-tight); } .ed__block-item { padding: var(--m-space-3); gap: var(--m-space-2); } .ed__block-btn { width: 36px; height: 36px; font-size: 14px; } .ed__span-bar { display: none; } .ed__inspector { padding: var(--m-space-4) var(--m-gutter-tight); } .ed__raw { padding: var(--m-space-4) var(--m-gutter-tight); font-size: 14px; } .ed__drawer-frame { width: 100%; max-width: 100%; } .ed__toast { bottom: 14px; max-width: 92vw; } } /* ============================================================ 8. 履历页 ============================================================ */ @media (max-width: 768px) { .resume-cover { grid-template-columns: 1fr; padding: var(--m-space-6) var(--m-gutter); gap: var(--m-space-4); } .resume-cover__sidebar { display: none; } .resume-cover__title { font-size: var(--m-fs-h1); line-height: var(--m-lh-heading); letter-spacing: -.01em; } .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--m-space-3); } .kpi { padding: var(--m-space-3) var(--m-space-2); } .resume-timeline { padding: var(--m-space-6) var(--m-gutter); } .chap { padding-left: var(--m-space-7); margin-bottom: var(--m-space-7); } .chap__company { font-size: var(--m-fs-h2); line-height: var(--m-lh-tight); } .chap__meta { flex-wrap: wrap; gap: var(--m-space-2); font-size: var(--m-fs-caption); } .story__title { font-size: var(--m-fs-h3); line-height: var(--m-lh-tight); margin-bottom: var(--m-space-2); } .story p, .story__sublist li { font-size: 15px; line-height: 1.7; } .chap-toc { display: none; } } /* ============================================================ 9. 极小屏 (≤390px,iPhone SE/Mini) ============================================================ */ @media (max-width: 390px) { :root { --m-gutter: 20px; --m-fs-hero: 34px; --m-fs-h1: 28px; --m-fs-h2: 22px; } .brand__name { display: none; } .nav { gap: 12px; } .nav__link span { font-size: 12px; letter-spacing: .04em; } .block-gallery, .block-stats { grid-template-columns: 1fr; } .ed__add-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ 10. 触屏设备 — 关闭 hover 抬起,加按下反馈 ============================================================ */ @media (pointer: coarse) { .case-card:hover, .exp-card:hover, .ed__block-item:hover { transform: none; } .btn:active, .case-card:active, .exp-card:active, .nav__link:active { opacity: .7; transition: opacity .1s; } .ed__left, .ed__center, .ed__right, .ed__blocks, .ed__inspector, .ed__raw, .detail-toc { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } /* ============================================================ 11. 横屏手机 ============================================================ */ @media (max-height: 480px) and (orientation: landscape) { .site-header { padding: 6px var(--m-gutter-tight); } .hero { padding: var(--m-space-5) var(--m-gutter) 100px; } .detail-hero { padding: var(--m-space-4) var(--m-gutter) var(--m-space-3); } .ed__right { min-height: 80vh; } /* 横屏 tab bar 更紧凑 */ .nav { height: calc(48px + env(safe-area-inset-bottom, 0px)); } .nav__link { min-height: 44px; padding: 6px 4px 8px; } .nav__link span { font-size: 11px; } body { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); } } /* ============================================================ 12. iPhone 安全区适配 (刘海/Home Indicator) ============================================================ */ @supports (padding: max(0px)) { @media (max-width: 768px) { .site-header { padding-left: max(var(--m-gutter-tight), env(safe-area-inset-left)); padding-right: max(var(--m-gutter-tight), env(safe-area-inset-right)); } .site-footer, .detail__pager { padding-bottom: max(var(--m-space-6), env(safe-area-inset-bottom)); } } }