响应式两栏布局用 display: grid 最稳，左栏自适应、右栏弹性固定宽，配合 minmax(0, 1fr) 防溢出、grid-gap 控制间距、媒体查询切单列；博客需语义化 HTML、服务端渲染首屏、结构化数据标记；侧边栏 sticky 需避免父容器 overflow:hidden 或 transform；字体用 clamp() 响应缩放；图片/视频/表格须设 max-width:100%。
响应式两栏布局用 display: grid 最稳
浮动（float）和传统 inline-block 在移动端容易错行或撑出横向滚动条，flex 对两栏等高、间距控制稍麻烦。直接上 display: grid，用 minmax(0, 1fr) 防止内容溢出破坏布局，同时兼容 Safari 12+ 和所有现代浏览器。
-
grid-template-columns: minmax(0, 1fr) 300px—— 左栏自适应，右栏固定宽但不硬编码像素，改用minmax(280px, 300px)更稳妥 - 加
grid-gap: 1.5rem替代左右 margin，避免父容器 padding 冲突 - 在媒体查询里把
grid-template-columns改成1fr即可单列，不用重写结构
博客文章列表要支持“无 JS 渲染”和语义化
很多框架默认用 JS 动态插入文章，但首页首屏内容必须原生 HTML 输出，否则 SEO 掉坑、LCP 拉垮。用标准 <article> 套 <header> + <main> + <footer>，标题用 <h2>（不是 <h1>，首页只有一个 <h1>）。
- 每篇
<article>加itemprop="blogPost"和itemscope，方便结构化数据识别 - 日期用
<time datetime="2024-05-20">May 20</time>，别写“2天前”，服务端渲染时就该是绝对时间 - 摘要段落用
<p>包裹，别用<div>，屏幕阅读器会跳过无语义容器
右侧边栏的 position: sticky 兼容性陷阱
想让侧边栏随页面滚动但始终可见？position: sticky 看似简单，实际在 iOS Safari 和旧版 Chrome 里常失效——根本原因是父容器没设 overflow: visible 或触发了层叠上下文。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给侧边栏外层加
style="height: fit-content"，否则sticky在 flex/grid 容器里可能被截断 - 确保其最近的有定位属性（
relative/absolute）的祖先元素 **没有**overflow: hidden或transform - 备用方案：用 IntersectionObserver 监听滚动位置并切换
position: fixed，但需注意 fixed 元素脱离文档流后留下的空白
字体与断行在小屏上崩得最隐蔽
不是文字缩放问题，而是 word-break: break-word 在某些安卓 WebView 里对中文无效，长英文 URL 或代码片段直接撑破容器。真正起效的是组合策略：
立即学习“前端免费学习笔记（深入）”；
- 全局设
* { word-break: break-word; overflow-wrap: break-word; }，overflow-wrap是 W3C 标准名，比word-wrap兼容性更好 - 对
<pre><code>块单独加white-space: pre-wrap和max-width: 100%，不然代码块横滚条藏在 viewport 外面 - 字体大小别只用
rem，搭配clamp(1rem, 2.5vw, 1.25rem)控制上下限，避免小屏字太小、大屏字太大
两栏框架真正的复杂点不在布局本身，而在内容边界——比如一张未约束宽高的图片、一个没设 max-width 的嵌入视频、或者用户复制粘贴进来的带内联样式的表格。这些都会绕过 CSS Grid 的保护机制，得靠 img, iframe, table { max-width: 100%; height: auto; } 这类兜底规则来收口。
