@charset "utf-8"; /* ========================================================================== style-h5.css — kimbs.cn 移动端（H5）适配层 -------------------------------------------------------------------------- 本文件**只包含 max-width 媒体查询**，因此在桌面端不产生任何样式， 渲染结果与 style.css 逐像素一致；手机上则把 2009 年的双栏固定布局 折叠成单栏、并把所有会撑破屏幕的元素收进视口。 由 tools/build_static.py 复制到 /wp-content/themes/kbs_theme/style-h5.css， 并在 中紧跟在 style.css 之后引入（靠源码顺序覆盖同优先级规则）。 断点： ≤ 768px 手机 / 竖屏小平板 → 单栏 H5 布局 ≤ 420px 小屏手机（iPhone SE 一类）→ 进一步收紧间距与字号 ========================================================================== */ /* ========================================================================== 1. 手机 / 竖屏小平板：≤ 768px ========================================================================== */ @media screen and (max-width: 768px) { /* ---------- 1.1 全局 ---------- */ /* 禁止 iOS 横屏自动放大字号 */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 手机上换用系统无衬线字体栈：老站指定的「宋体/Courier New」在 iOS/Android 上并不存在，实际回退成衬线字体，小屏可读性差 */ body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.7; } /* 兜底：任何漏网元素都不允许把页面撑出横向滚动条 */ html, body { overflow-x: hidden; } /* 内容型媒体一律不超出容器宽度 */ img { max-width: 100%; height: auto; } iframe, embed, object, video { max-width: 100%; } table { max-width: 100%; } /* ---------- 1.2 头部：logo + 站名一行，认证徽章另起一行 ---------- */ #header { height: auto; } #header .labels { height: auto; padding: 14px 12px 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } #header .logo, #header .domain, #header .honor { float: none; position: static; top: auto; right: auto; left: auto; } #header .logo img { display: block; width: 48px; height: auto; } #header .domain { margin-left: 12px; } #header .domain h1 { font-size: 1.8em; line-height: 1.1; } #header .honor { flex: 0 0 100%; display: flex; justify-content: center; margin-top: 12px; } #header .honor div { float: none; margin: 0 7px; } #header .honor a { display: block; } #header .honor img { display: block; width: 52px; height: auto; } /* ---------- 1.3 主导航：等分五格 tab 条（原来会溢出被裁掉） ---------- */ #header .menu-header { height: 42px; } #header .menu-header ul { display: flex; width: 100%; margin-left: 0; } #header .menu-header li { float: none; flex: 1 1 0; min-width: 0; height: 42px; text-align: center; } #header .menu-header li:first-child { border-left: 0; } #header .menu-header a { margin: 0; padding: 0 2px; line-height: 42px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- 1.4 主栏 + 侧栏：双栏改上下单栏 ---------- */ /* 源码里 #container 在前、#sidebar 在后，去掉浮动后侧栏自然落到正文下方 */ #container { width: 100%; float: none; margin: 12px 0 0; min-height: 0; } #container #content { margin: 0 10px 18px; } #sidebar { width: 100%; float: none; margin: 0; } #sidebar #right { margin: 0 10px 18px; } /* ---------- 1.5 文章列表 / 正文卡片 ---------- */ #nav-above.navigation { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; } #content .mainbox { margin-bottom: 18px; } #content .post, #content .page { padding: 14px; } #content .entry-title { font-size: 1.3em; line-height: 1.45; } #content .entry-meta { text-align: left; line-height: 22px; font-size: 13px; } #content .entry-summary, #content .entry-content { line-height: 1.75; } /* 老站 reset 把 p 的 margin 清成 0，段间距靠行高撑；小屏补回段距 */ #content .entry-content p { margin-bottom: 12px; } #content .entry-content img { margin: 6px 0; } #content .entry-utility { padding-top: 8px; line-height: 1.7; text-align: left; font-size: 13px; } #content .entry-utility .meta-sep { margin: 0 4px; } /* ---------- 1.6 代码块 / 表格：横向滚动，不再撑破页面 ---------- */ /* 原规则 width:98% 配上 padding+border（未设 box-sizing）必然溢出 12px */ pre, div .php, div .bash, div .c, div .cpp, div .ini, div .java, div .mysql, div .perl, div .python, div .rails, div .ruby, div .smarty, div .sql, div .text, div .xml, div .css, div .javascript, div .html4strict, div .apache { width: 100% !important; box-sizing: border-box !important; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 13px; } #content .entry-content table { width: 100% !important; } #content .entry-content td, #content .entry-content th { /* 用 overflow-wrap 而非 word-break：只在整词放不下时才断， 避免 "Reference" 被拆成 "Referenc / e" */ word-break: normal; overflow-wrap: break-word; vertical-align: top; } /* ---------- 1.7 侧栏：长列表改多列排布，压掉纵向长度 ---------- */ #sidebar .box { margin-bottom: 14px; padding: 12px; } #sidebar .box > li > h2 { margin-bottom: 4px; font-size: 15px; } #sidebar .box > li > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } /* 归档项形如「2018-11」，很短，排三列且不换行 */ #sidebar #archives > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } #sidebar #archives ul > li { white-space: nowrap; } /* 页面标题是长英文串，单列铺满一行，允许折行（截断会丢掉标题后半段） */ #sidebar #pages > ul { grid-template-columns: minmax(0, 1fr); } #sidebar .box ul > li { line-height: 1.9; font-size: 14px; overflow-wrap: break-word; word-break: normal; } /* ---------- 1.8 评论 ---------- */ #content .commentlist { margin-top: 20px; } .commentlist .comment { margin-top: 12px; padding: 8px; } .commentlist .comment .comment-body { line-height: 1.75; } .commentlist .comment .comment-body p { margin-bottom: 8px; } /* 评论里常出现超长英文包名（yum-metadata-parser-1.1.2-3.el5.centos.i386.rpm）。 它们撑大 的 min-content，进而把评论表格（）顶出屏幕。 word-break 与 overflow-wrap:anywhere 都会参与 min-content 计算（break-word 不会）， 因此这里必须用它们，而不是 overflow-wrap:break-word。 table-layout:fixed 再把表格钉死在 100% 宽，双保险。 */ .commentlist table { table-layout: fixed; width: 100% !important; } .commentlist .comment-body, .commentlist .comment-body p, .commentlist .comment-author { word-break: break-word; overflow-wrap: anywhere; } /* 正文同理：老文章里有长 URL 与长命令，兜住不让它撑破卡片 */ #content .entry-content { overflow-wrap: anywhere; } /* ---------- 1.9 表单 ---------- */ #respond input { width: 100%; max-width: 100%; height: 34px; box-sizing: border-box; } #respond textarea { width: 100%; box-sizing: border-box; } #respond #submit, #respond #reset { height: 38px; margin: 6px 8px 0 0; } #searchform #s { width: 66%; box-sizing: border-box; } #searchform #searchsubmit { width: 31%; } /* ---------- 1.10 页脚 ---------- */ #footer { position: static; height: auto; margin-top: 10px; } #footer .copyright { line-height: 1.8; padding: 14px 12px; } } /* ========================================================================== 2. 小屏手机：≤ 420px ========================================================================== */ @media screen and (max-width: 420px) { body { font-size: 14px; } #header .labels { padding: 12px 10px 8px; } #header .logo img { width: 42px; } #header .domain { margin-left: 10px; } #header .domain h1 { font-size: 1.55em; } #header .honor { margin-top: 10px; } #header .honor div { margin: 0 5px; } #header .honor img { width: 46px; } #header .menu-header a { font-size: 12px; } #container #content { margin: 0 8px 16px; } #sidebar #right { margin: 0 8px 16px; } #content .post, #content .page { padding: 12px; } #content .entry-title { font-size: 1.2em; } }