必须用 @media + viewport + rem 或 flex/grid 布局三件套，缺一不可；viewport 标签须写在 head 最前面且内容为 width=device-width, initial-scale=1.0；推荐 flex 布局替代浮动/绝对定位；断点只需 480px 和 768px；字体用 rem 或 clamp，图片加 height: auto 和 aspect-ratio。
直接上结论：不用框架、不写 media query 也能做基本自适应，但真要兼顾 iPhone 小屏和 27 寸显示器，必须用 @media + viewport + rem 或 flex/grid 布局三件套，缺一不可。
<meta name="viewport"> 必须写对，否则手机上全是缩放错觉
很多简历在手机上“看起来能看”，其实是浏览器强行缩放的结果——文字小得要命、按钮点不准、导航挤成一条线。根本原因就是 <meta> 标签漏了或写错了。
- 正确写法只有一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 错误写法常见有：
- 漏掉
initial-scale=1.0→ 手机会默认按 980px 宽度渲染，再缩小显示 - 写成
width=1200或user-scalable=no→ 直接锁死缩放，阅读体验灾难 - 放在
里或没放在最前面 → 部分 Android 浏览器会忽略
- 漏掉
这个标签不是“可选优化”，是响应式布局的启动开关。没它，后面所有 CSS 都白搭。
用 flex 布局替代浮动/绝对定位，避免手机端内容溢出
简历里常见的“左侧头像+右侧信息”“技能图标横排”“经历时间轴”等结构，如果还用 float: left 或 position: absolute，在小屏上大概率会：
- 文字被切掉（
overflow: hidden默默吃掉内容） - 图标重叠（因为脱离文档流后宽度计算失效）
- 滚动条意外出现（父容器没设
min-width）
推荐统一用 display: flex，配合以下组合：
- 头像+信息并排 →
flex-direction: row+flex-wrap: wrap（小屏自动换行） - 技能图标横向滚动 →
flex-wrap: nowrap+overflow-x: auto+-webkit-overflow-scrolling: touch - 时间轴纵向排列 →
flex-direction: column，手机端天然适配
别硬撑“一行显示全部”，移动端优先意味着：允许换行、允许滚动、允许折叠次要信息。
@media 断点别乱设，两个就够了：480px 和 768px
网上教程常列五六个断点，实际做简历根本用不上。你不是在写电商平台首页。
@media (max-width: 480px)：覆盖所有 iPhone 竖屏（含 SE）和低端安卓小屏
在这里把导航栏收成汉堡菜单、字体降到14px、padding减半、隐藏非核心图标（如 RSS 订阅）@media (min-width: 768px)：覆盖 iPad 及以上尺寸
这里可以恢复双栏布局、加 hover 效果、放大头像、展开技能标签云
别碰 1024px 或 1200px 断点——简历不是后台系统，用户不会在大屏上全屏打开你的简历网页；而且多数人用笔记本浏览，分辨率其实就在 1366×768 左右。
字体和图片的“自适应”最容易被忽略
- 字体别写死
font-size: 16px，改用font-size: 1rem，并在根元素设html { font-size: 100%; }；更进一步可用clamp(1rem, 1.2vw, 1.25rem)实现平滑缩放 - 图片别只靠
width: 100%，必须加height: auto防止拉伸变形；头像类建议用aspect-ratio: 1/1+object-fit: cover - SVG 图标比 PNG 更稳——没有缩放模糊问题，也不占 HTTP 请求（内联即可）
这些细节不报错，但会让简历在不同设备上观感差异极大：同一段话，在 iPhone 上密不透风，在 Mac 上却空得吓人，根源往往就在这几行 CSS。
真正卡住人的从来不是“怎么写”，而是“哪些地方不能省”。viewport 写错、flex 没设 wrap、字体没用 rem —— 这三处任一出问题，都会导致“明明代码看着没问题，手机上就是不对劲”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
