medium.css Demo本地实战：Parcel+Pug+CSS Grid搭建响应式Medium风格文章页教程

medium.css Demo本地实战ParcelPugCSS Grid搭建响应式Medium风格文章页教程【免费下载链接】medium.cssCompact typography for the web项目地址: https://gitcode.com/gh_mirrors/me/medium.cssmedium.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.pugParcel 会自动编译 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屏幕宽度布局形态说明大于 1072px5 列封面横跨 3 列正文 740px 居中740px ~ 1072px3 列封面与正文收窄堆叠小于 740px1 列手机全屏堆叠标题块移到封面图上方五、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或直接引入文件只保留排版部分七、常见问题解答FAQnpm start 报错找不到 parceldemo 依赖的是 Parcel 1.xparcel-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），仅供参考