必须在<head>中添加viewport meta标签，否则浏览器默认按桌面宽度渲染，导致手机端内容挤压、文字过小、按钮难点击；常见错误包括拼写错误、宽度硬编码或位置错误。
零基础也能搭出能用、能看、能改的响应式个人主页，关键不在学完所有 HTML/CSS，而在于先跑通最小闭环：一个 index.html 文件 + 一段内联 <style> + 手动测试不同屏幕宽度。其他都是后续可叠加的优化。
怎么让页面在手机上不缩成一团？用 viewport meta 是硬门槛
没加这行，浏览器默认按桌面宽度（通常是 980px）渲染，再缩放显示在手机上——内容挤、文字小、按钮点不准。这不是 CSS 能修的，是加载第一刻就决定的。
必须在 <head> 里加上：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 漏掉
name="viewport"或拼错成viewpoint - 写成
content="width=320"—— 这会锁死宽度，横屏时右侧被切掉 - 放在
<body>里或 JS 后加载 —— 失效
不用框架也能做响应式：从 max-width 切断点开始写
初学者常以为响应式=用 Bootstrap，其实核心就两条：流式布局 + 媒体查询。先放弃“三栏变一栏”这种复杂目标，专注把头像、标题、简介这几块在小屏下堆叠对齐。
实操建议：
- 所有容器用
max-width: 100%，避免固定像素宽（如width: 960px） - 字号用
rem或em，别全用px；比如font-size: 1.2rem在手机上会随根字体缩放 - 只设一个主流断点：
@media (max-width: 768px)，覆盖 iPad 竖屏和所有手机 - 在这个断点里，把导航栏
display: none，正文padding减半，图片width: 100%
示例片段：
<style><br> .hero { text-align: center; }<br> @media (max-width: 768px) {<br> .hero h1 { font-size: 1.5rem; }<br> .hero img { width: 90%; max-width: 300px; }<br> }<br></style>
图片模糊、加载慢？<picture> 太重，先用 srcset + sizes
响应式页面最显眼的破绽就是图片：PC 上高清，手机上看糊；或者手机下载了 2MB 的大图，等半天。
零基础够用的解法是 srcset，它让浏览器自己选图，不用 JS、不依赖第三方库：
<img src="avatar-small.jpg"<br> srcset="avatar-small.jpg 480w,<br> avatar-medium.jpg 768w,<br> avatar-large.jpg 1200w"<br> sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 300px"<br> alt="我的头像">
注意点：
-
src是兜底图，必须存在且是小图（防不支持srcset的老浏览器） -
w单位对应图片原始宽度，不是屏幕宽度 -
sizes描述“这张图在不同视口下打算占多宽”，影响浏览器选择逻辑，不能写死100vw - 生成多尺寸图用命令行工具更稳：
convert avatar.png -resize 480x avatar-small.jpg（ImageMagick）
部署后手机打不开？检查文件路径和大小写敏感
本地双击 index.html 能看，传到 GitHub Pages 或 Vercel 就白屏/报 404，90% 是路径问题，尤其图片和 CSS 引入。
关键检查项：
- 所有路径用相对路径，且全部小写：
./images/me.jpg，别写Images/ME.JPG - 确认服务器根目录下真有
index.html，不是Index.html或home.html - GitHub Pages 默认只托管
docs/目录或gh-pages分支，别传到main分支根目录就不管了 - 用浏览器开发者工具的 Network 标签页，看红色 404 请求具体是哪个文件，直接点链接看是否能打开
一个容易被忽略的细节：Windows 下不区分 css 和 CSS，但 Linux 服务器（包括 GitHub Pages）严格区分。写错一个字母，图片就永远加载不出来。
