CSS 排版关键选择器要避开全局污染

很多模板的 style.css 里写 p { line-height: 1.6; } 这类通配规则，结果影响到导航、侧边栏甚至按钮文字。详情页排版应通过作用域限定生效。

推荐做法是给

立即学习“前端免费学习笔记（深入）”；

.post-content h1 {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}
.post-content p {
  margin-bottom: 1.25rem;
  line-height: 1.7;
}
.post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}

注意：不要用 ID 选择器（如 #post-body）做排版控制——ID 在页面中必须唯一，而模板可能用于多篇文章复用，ID 冲突会导致 CSS 失效或 JS 报错。

响应式断点要匹配真实设备阅读习惯

不少模板只设 @media (max-width: 768px) 一刀切，但手机用户在竖屏下真正需要的是更紧凑的行高、更大的点击区域和更早的字体缩放临界点。

与光AI

一站式AI视频工作流创作平台

下载

• 正文 font-size 建议从 1rem（16px）起步，在 480px 宽度以下升到 1.125rem，避免小屏文字过小
• line-height 在移动端可设为 1.5，比桌面端的 1.7 更利快速扫读
• 图片 max-width 必须是 100%，但记得加 height: auto 防止拉伸变形
• 避免在 @media 里重写整个排版流（比如突然改成 flex column），优先用 margin、padding 和 font-size 微调

嵌入内容（代码块、视频、引用）需独立样式隔离

详情页常插入

、