用纯HTML+CSS搭建个人电子名片最稳；关键在排版节奏、留白控制和字体层级，姓名用clamp实现响应式缩放，职位用p标签退半步，联系方式需语义明确且可点击，根字体用clamp，容器用max-width:60ch，禁用user-scalable=no，并添加打印样式。
直接说结论：用纯 HTML + CSS 搭建个人电子名片，不依赖框架、不调 API，最稳；但“精美”二字的关键不在代码多寡，而在排版节奏、留白控制和字体层级——多数人翻车在 font-size 和 line-height 随意设，导致文字糊成一团。
怎么让名字和职位在视觉上真正“立住”
很多人把 <h1> 套在姓名上就完事，结果在手机上看小得看不清，在桌面端又大得突兀。真实场景里，姓名需要同时满足：可读性强、有主次关系、响应式不崩。
- 用
<h1>包姓名，但必须配font-size: clamp(1.5rem, 4vw, 2.5rem)—— 这比媒体查询更轻量，且能平滑缩放 - 职位描述别用
<h2>，改用<p class="title">，并设font-weight: 500+letter-spacing: .05em，视觉上退半步，不抢主信息 - 避免给姓名加粗再加阴影再加渐变——三者叠加后，小字号下文字边缘发虚，iOS Safari 尤其明显
联系方式模块为什么总显得廉价
图标+文字堆砌是通病。问题本质是语义缺失和点击反馈缺失。用户扫一眼要立刻知道“哪个能点”“点了发生什么”，而不是靠猜。
- 每个联系项必须是独立的
<a>，href值严格匹配协议：mailto:xxx@xx.com、tel:+8613800138000、https://github.com/xxx - 图标用系统自带符号（如 ✉️、?、?）或 SVG 内联，禁用 icon font —— 字体加载失败时会留空白方块
- 加
touch-action: manipulation到链接上，安卓微信内嵌浏览器点击延迟从 300ms 降到几乎为零
响应式断点不是越多越好，两个足够
所谓“适配所有设备”，实际只需守住两道线：iPhone 竖屏窄宽（≤390px）和常规桌面（≥768px）。中间区间靠弹性布局自然过渡，硬塞 @media (max-width: 480px) 反而增加维护成本。
立即学习“前端免费学习笔记（深入）”；
- 根字体设
html { font-size: clamp(16px, 2.5vw, 18px); }，后续所有rem单位自动响应 - 名片容器用
max-width: 60ch（不是 px），保证每行字符数在 45–65 之间，可读性最佳 - 禁用
user-scalable=no—— 屏幕阅读器和视力障碍用户需要缩放，这是 WCAG 基础要求
最容易被忽略的是打印样式：用户可能想 Ctrl+P 保存为 PDF。加一段 @media print，把背景色清空、去掉链接下划线、隐藏无关图标，几行 CSS 就能让电子名片真正“可用”。
