推荐用Milligram框架三步搭建响应式博客列表：引入2KB的milligram.min.css，使用column类实现移动端100%、桌面端60%自适应布局，再局部调整标题颜色、段落行高和链接悬停样式，避免零基础硬写HTML/CSS导致的 viewport、媒体查询、flex、rem、图片适配等多重问题。
零基础直接上手做响应式博客列表，不推荐从纯 HTML 开始硬写——你会很快卡在「怎么让列表在手机上不挤成一团」「标题文字大小怎么随屏幕变」「图片一拉伸就糊」这类问题上。真正可行的路径是：用最小必要 HTML 结构 + 现成 CSS 框架（如 Bootstrap 或 Milligram）快速搭出可用页面，再逐步替换、理解每块代码的作用。
为什么别从 <html><head><body> 一行行敲起
纯手写响应式布局需要同时处理：viewport 设置、媒体查询（@media）、弹性盒子（display: flex）、相对单位（rem/vw）、图片自适应（max-width: 100%）——零基础同时消化这五项，大概率写出一堆无效样式或被浏览器默认样式覆盖。
- 浏览器对
<ul>和<li>有默认外边距和缩进，不重置就会错位 -
width: 100%在嵌套容器里常失效，必须配合box-sizing: border-box - 手机端点击区域太小？没加
touch-action: manipulation或最小高度设置 - 字体在 iOS 上默认放大？需加
-webkit-text-size-adjust: 100%
用 Milligram 三步做出可运行的响应式列表
它只有 2KB，无 JS 依赖，CSS 规则透明易改，比 Bootstrap 更适合初学观察源码。下载 milligram.min.css 后，直接引入即可生效：
<link rel="stylesheet" href="milligram.min.css">
博客列表结构保持极简：
立即学习“前端免费学习笔记（深入）”；
<main class="container">
<section class="row">
<article class="column column-60">
<h2>如何用 CSS 控制图片宽度</h2>
<p>关键不是设 <code>width</code>，而是设 <code>max-width: 100%</code> 并确保父容器不溢出…</p>
<a href="#">阅读全文</a>
</article>
</section>
</main>
-
class="column column-60"在桌面端占 60% 宽，小屏自动转为 100% - 所有文字、间距、断行规则已内置，不用单独写
font-size或line-height - 删掉
milligram.min.css，页面立刻“坍塌”——这是你理解 CSS 作用范围的最佳时机
替换默认样式时，只动这三处就足够优雅
想让列表看起来不像模板？不必全盘重写，聚焦修改：
- 标题颜色和字重：
article h2 { color: #2c3e50; font-weight: 600; } - 文章摘要行高与留白：
article p { line-height: 1.6; margin-bottom: 1rem; } - 链接悬停效果（避免用
text-decoration: underline，改用底部细线）：a:hover { border-bottom: 1px solid #3498db; }
注意：margin-bottom: 1rem 比 16px 更安全——rem 随根字体缩放，适配不同系统字体设置；而固定像素在某些安卓浏览器里会显示过小。
上线前必查的三个硬伤
本地预览没问题，一上传就错位？常见原因就这三个：
-
index.html文件编码不是 UTF-8（特别是含中文标题时），浏览器解析乱码导致样式表加载中断 - CSS 文件路径写成
css/milligram.css，但实际放在根目录，应改为milligram.min.css - 图片用了绝对路径如
C:\myblog\img\cover.jpg，部署后 404 —— 全部改成相对路径./img/cover.jpg
响应式不是「写完再适配」，而是从第一行 HTML 就按移动优先（mobile-first）写：先保证小屏可读，再用 @media (min-width: 768px) 往大屏加细节。很多人卡在第一步，就是因为一开始就在桌面尺寸下调试。
