medium.css Demo本地实战：Parcel+Pug+CSS Grid搭建响应式Medium风格文章页教程
【免费下载链接】medium.cssCompact typography for the web项目地址: https://gitcode.com/gh_mirrors/me/medium.css
medium.css 是一套围绕 Medium.com 阅读体验打造的极简 Web 排版样式表，单文件就能让普通博客页面拥有衬线正文、舒适行高与大号首字下沉的"精品阅读感"。本教程带你一步步在本地跑通 medium.css 的 demo 项目：使用 Parcel 构建工具 + Pug 模板 + CSS Grid 布局，10 分钟搭建出一个完全响应式的 Medium 风格文章页，并讲透它的排版与布局原理。零基础也能照做。🚀
一、medium.css是什么？单文件解锁Medium阅读体验
medium.css（核心文件medium.css）本质上是一份约 90 行的"排版说明书"，只管三件事：选什么字体、多大字号、什么颜色。它覆盖了h1、h2、p、a、i、mark、blockquote、code这些基础 HTML 元素，并提供 3 个自定义类：
| 类名 | 作用 |
|---|---|
.first-letter | 大号首字下沉，横跨两行 |
.highlighted | 品牌色背景高亮 |
.subtitle | 副标题样式 |
字体方案参考了 Google Fonts 中最接近 Medium 的三款：正文Lora（衬线）、UILato（无衬线）、标题/引用Playfair Display（衬线），各司其职。
二、先认识demo项目结构
打开项目目录，和这个教程相关的只有 5 个文件：
medium.css/ ├── medium.css # 核心排版样式表（可直接用于任何项目） └── demo/ ├── package.json # demo依赖与启动脚本 ├── src/ │ ├── main.pug # 页面模板（Pug语法，等价于HTML） │ └── medium_extended.css # 排版样式 + CSS Grid页面布局 └── gif/ └── medium.gif # 效果动图理解这 5 个文件的分工，你就掌握了整个 demo 的骨架：main.pug负责"写了什么"，medium_extended.css负责"长什么样"。
三、本地快速上手：3条命令跑通demo
第 1 步：获取代码
git clone https://gitcode.com/gh_mirrors/me/medium.css第 2 步：安装 demo 依赖（注意要在 demo 目录下执行）
cd demo npm installdemo/package.json中只声明了两个关键依赖：构建工具parcel-bundler和模板引擎pug。
第 3 步：启动本地服务
npm startstart脚本实际执行的是parcel src/main.pug：Parcel 会自动编译 Pug 模板和 CSS，并在浏览器中打开本地开发服务器。之后你修改main.pug里的标题或正文，页面会即时热更新，非常适合边改边看。💡
不想用构建工具？直接下载
medium.css文件，在 HTML 的<head>里引用即可，零依赖。
四、CSS Grid如何排布响应式文章页
demo 的布局全部写在demo/src/medium_extended.css的.container中，核心思路一句话：正文栏固定 740px，两侧自适应：
- 列定义
auto 166px 740px 166px auto：两侧auto列自动吸收剩余宽度，正文永远居中 grid-template-areas划分三个区域：顶部img（封面+标题+作者）、中部article（正文）、底部footer- 正文宽度锁定740px——这是排版黄金法则：一行文字不超过 740px，眼睛左右移动最省力
响应式由两个媒体查询断点完成，无需任何 JavaScript：
| 屏幕宽度 | 布局形态 | 说明 |
|---|---|---|
| 大于 1072px | 5 列 | 封面横跨 3 列，正文 740px 居中 |
| 740px ~ 1072px | 3 列 | 封面与正文收窄堆叠 |
| 小于 740px | 1 列 | 手机全屏堆叠，标题块移到封面图上方 |
五、3个值得照抄的排版技巧
- 正文行高 1.58 + 字距 -0.03px：行高留出接近半行的呼吸空间，字距微缩让单词更紧凑，两者搭配阅读最省力。
- 柔和文字色：正文用
rgba(0,0,0,0.84)而非纯黑，白色背景上观感更温和；副标题再降到rgba(0,0,0,0.54)，形成信息层级。 - 品牌色点缀：
.highlighted默认#7DFFB3绿色高亮，作者头像边框同色——换成你的品牌色，整套页面气质立刻统一。
六、改成你自己的Medium风格博客页
跑通 demo 后，改造只需动两个文件：
- 换标题、副标题、作者信息：编辑
demo/src/main.pug中的h1、p.subtitle和.authorName - 换封面图：修改
demo/src/medium_extended.css中.image的background地址 - 换高亮色：改
.highlighted的background值 - 正式项目中使用：
npm install --save medium.css或直接引入文件，只保留排版部分
七、常见问题解答（FAQ）
npm start 报错找不到 parcel？demo 依赖的是 Parcel 1.x（parcel-bundler），请确认已在demo目录执行过npm install，也可手动运行npx parcel src/main.pug。
字体需要联网吗？样式表通过@import从 Google Fonts 加载 Lora / Lato / Playfair Display，网络受限时会自动回退系统字体，布局不会坏。
不用构建工具能用吗？可以。medium.css是单文件零依赖样式表，下载后直接<link>引入即可。
八、总结
一句话记住本教程：medium.css = 选对字体 + 调好间距 + 固定 740px 行宽。配合 demo 里的 Pug 模板和 CSS Grid 布局，你得到的是一个桌面居中、手机单列、阅读体验直逼 Medium 的响应式文章页 ✍️
【免费下载链接】medium.cssCompact typography for the web项目地址: https://gitcode.com/gh_mirrors/me/medium.css
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
