响应式个人名片必须添加viewport meta标签，否则媒体查询失效；应使用flexbox布局、rem字体单位、svg图标和高容错二维码，确保内容在各设备上可读可操作。
响应式个人名片必须用 viewport meta 标签
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，所有 CSS 媒体查询都会失效——手机上永远显示桌面版缩放后的小字，不是“不响应”，而是根本没启用响应机制。
这个标签必须放在 最顶部，紧随 <title></title> 之后。常见错误是漏写、写成 user-scalable=no（禁用缩放会害 usability）、或把 initial-scale=1.0 写成 1（部分旧 Android 浏览器解析失败）。
用 Flexbox 布局比 float 或 inline-block 更可靠
个人名片通常含头像、姓名、职位、联系方式几块，需要在小屏竖排、大屏横排。用 float 清除浮动麻烦，inline-block 有空白字符间隙，而 display: flex 天然支持 flex-direction: column 和 row 切换。
实操建议：
- 容器设
display: flex+flex-wrap: wrap，子项用flex: 1 1 100%控制断行 - 小屏下用
@media (max-width: 768px)改flex-direction: column - 避免对 flex 子项设固定
width，改用flex-basis或min-width - 头像用
aspect-ratio: 1/1配合object-fit: cover，防止拉伸变形
字体大小别只用 px，优先用 rem + 媒体查询微调
纯 px 在 iOS Safari 缩放时可能被忽略；纯 em 容易嵌套失控；rem 是最稳的选择——根元素 font-size 作为基准，再配合媒体查询动态调整。
推荐做法：
- 在
:root设font-size: 16px（默认值），正文用1rem - 小屏下设
:root { font-size: 14px }，大屏设18px - 标题可用
1.5rem、2rem等，避免写死px值 - 行高统一用无单位数值（如
line-height: 1.5），不写px或em
图片和图标要适配高清屏，但别盲目用 srcset
个人名片里的头像、二维码、社交图标尺寸固定且不大，盲目加 srcset 反而增加 HTTP 请求和维护成本。
更务实的方案：
- 头像导出 2x 尺寸（如 200×200 像素），CSS 中用
width: 100px; height: 100px; background-size: cover - 图标优先用 inline SVG：无失真、可配色、体积小，比如 GitHub 图标直接嵌
<svg>...</svg> - 二维码生成时选「高容错率（H 级）」，宽度设为最小 120px，否则小屏扫描失败率陡增
- 避免
<img src="avatar.jpg">后加width属性——会强制拉伸，改用 CSS 控制
响应式不是堆砌技术，而是让每块内容在不同设备上可读、可点、可扫——头像糊了、电话号码点不开、邮箱复制不了，再“现代”的 HTML 也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
