css scroll-snap 本身不提供“预览”功能，仅控制滚动结束时的吸附位置；分块翻页预览需配合 scroll-behavior: smooth、明确容器高度、直接子元素结构、scroll-snap-type 与 scroll-snap-align 正确配对，以及 scroll-padding-top 等细节校准。
怎么让页面像电子书一样翻页而不是滚动
浏览器默认滚动体验不适合阅读长文本，得用 CSS 的 scroll-snap-type 或 JavaScript 模拟翻页。但真要“翻页”效果（比如左右滑动切换章节），scroll-snap-type: y mandatory 会卡顿且不支持动画；更可靠的是用 transform: translateX() + touchstart/move/end 手动控制偏移量，或者直接用现成的轻量库如 turn.js（注意：它依赖 jQuery，现代项目建议避开）。
实际推荐方案是：用单页结构 + overflow: hidden 容器，每个章节为一个 section，宽度设为 100vw，横向排列；再用 scrollLeft 控制滚动位置，配合 scroll-behavior: smooth 实现平滑切换。这样兼容性好、无额外依赖、也方便键盘 ←/→ 切换。
- 别用
position: absolute叠加章节——会导致焦点、选中文本、打印异常 - 禁用
user-select: none——会阻止文字复制和屏幕阅读器识别 - 移动端需加
touch-action: pan-y防止误触发垂直滚动冲突
字体、行高和宽度怎么调才不累眼
阅读疲劳主要来自行长过长、行高过密、字体渲染发虚。不是字号越大越好，而是单位和比例要合理。
font-size 建议用 rem，根元素设 font-size: 16px（避免用户缩放失效）；正文用 1.125rem（即 18px）起步；行高设 line-height: 1.6 —— 这个值经多数排版验证，比 1.5 更宽松，比 1.75 更紧凑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 最大内容宽度控制在
max-width: 68ch（不是px或%）——ch单位基于字符“0”的宽度，天然适配字体，68 是可读性最佳区间 - 用
font-family: "Segoe UI", system-ui, -apple-system, sans-serif，避免硬写"Times New Roman"——系统字体更清晰，尤其在 Windows 和 macOS 的 subpixel 渲染差异下 - 禁用
text-rendering: optimizeLegibility—— 在部分 Chrome 版本中反而导致字间距异常
夜间模式切换为什么总出错
常见错误是只改 background-color 和 color，结果图片发黑、代码块背景反白、链接失去对比度。真正可用的夜间模式必须连 SVG 图标颜色、box-shadow、border-color 一起响应。
最简实现是用 @media (prefers-color-scheme: dark) + CSS 自定义属性：
:root {
--bg: #fff;
--text: #333;
--border: #eee;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e1e1e;
--text: #e6e6e6;
--border: #333;
}
}
body { background-color: var(--bg); color: var(--text); border-color: var(--border); }
- 别用 JS 动态 class 切换——会闪屏，且无法响应系统级深色设置变更
- 确保所有颜色都通过
var(--xxx)引用，包括svg fill、input::placeholder、code背景 - 测试时打开系统深色模式，再检查
img是否仍过曝——必要时加picture+source media="(prefers-color-scheme: dark)"
怎么让 Ctrl+F 搜索能跨章节匹配
如果把每章放在独立 iframe 或用 display: none 隐藏，浏览器搜索（Ctrl+F）就找不到隐藏内容。哪怕用了翻页动画，所有章节 HTML 必须真实存在于 DOM 中，且不能被 visibility: hidden 或 aria-hidden="true" 遮蔽。
- 隐藏非当前章的唯一安全方式是
position: absolute; left: -9999px（或transform: translateX(-9999px)），保持渲染但脱离视口 - 禁用
will-change: transform在翻页容器上——某些版本 Safari 会因此让搜索框无法聚焦 - 若用
IntersectionObserver懒加载后续章节，必须在首次加载时至少预载前后各一章，否则搜索时内容还没进 DOM
翻页逻辑越简单，搜索越可靠。花哨动画和极致性能优化，往往以牺牲基础可访问性为代价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
