响应式两栏布局用 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></article> 套 <header></header> + <main></main> + <footer></footer>，标题用 <h2></h2>（不是 <h1></h1>，首页只有一个 <h1></h1>）。
- 每篇
<article></article>加itemprop="blogPost"和itemscope，方便结构化数据识别 - 日期用
<time datetime="2024-05-20">May 20</time>，别写“2天前”，服务端渲染时就该是绝对时间 - 摘要段落用
<p></p>包裹，别用<div>，屏幕阅读器会跳过无语义容器<h3>右侧边栏的 <code>position: sticky兼容性陷阱想让侧边栏随页面滚动但始终可见？
position: sticky看似简单，实际在 iOS Safari 和旧版 Chrome 里常失效——根本原因是父容器没设overflow: visible或触发了层叠上下文。- 给侧边栏外层加
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 class="brush:php;toolbar:false;"><code></code> 块单独加 <code>white-space: pre-wrap</code> 和 <code>max-width: 100%</code>，不然代码块横滚条藏在 viewport 外面</pre> - 字体大小别只用
rem，搭配clamp(1rem, 2.5vw, 1.25rem)控制上下限，避免小屏字太小、大屏字太大
两栏框架真正的复杂点不在布局本身，而在内容边界——比如一张未约束宽高的图片、一个没设
max-width的嵌入视频、或者用户复制粘贴进来的带内联样式的表格。这些都会绕过 CSS Grid 的保护机制，得靠img, iframe, table { max-width: 100%; height: auto; }这类兜底规则来收口。 - 给侧边栏外层加
