响应式个人主页需三步：加viewport元标签（）、用flex/grid替代float布局、按内容临界点设媒体查询断点而非固定768px。
直接上手就能跑通的响应式个人主页，核心就三件事：viewport 元标签必须加、用 flex 或 grid 布局替代浮动、媒体查询断点别硬写成 768px —— 它得跟着你内容撑开的实际宽度走。
viewport 元标签漏了，手机上永远缩成一团
这是所有响应式失效的第一原因。没有它，iOS Safari 和安卓 Chrome 都会默认按 980px 宽度渲染页面，再缩放显示，导致文字小得看不清、按钮点不准。
- 必须放在
里，且是第一个<meta>标签（避免被其他 meta 干扰） - 写法只认这一种：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，多一个空格或少个引号都可能失效 - 别信“
user-scalable=no”这种禁缩放写法——它在 iOS 10+ 已被忽略，还可能触发无障碍阅读器警告
布局用 flex 而不是 float，否则换屏就错位
float 是为图文环绕设计的，不是为响应式准备的。强行用它做导航栏或卡片流，一旦屏幕变窄，元素会塌陷、换行不可控，调试时经常发现 clear: both 压根不起作用。
- 导航栏用
display: flex+flex-wrap: wrap，小屏自动折行，比写一堆float: left清除更稳 - 技能标签、作品卡片这类横向排列内容，优先用
display: grid，配grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))，一行能塞几个就塞几个，不写死列数 - 别给 flex 项目设固定
width，改用flex: 0 1 300px（不放大、可缩小、基准 300px），让容器自己算余量
媒体查询断点不是设备尺寸，而是内容临界点
很多人照抄 “@media (max-width: 768px)”，结果 iPad 横屏（768×1024）下样式乱套——因为它的 viewport 宽度其实是 768px，但内容根本没挤到需要折叠的程度。
立即学习“前端免费学习笔记（深入）”；
- 先写桌面端样式，等某块内容开始重叠、换行异常、文字过长溢出时，再加断点。比如导航文字挤在一起了，才加
@media (max-width: 620px) - 用
em或rem写断点（如max-width: 38.75em），比像素值更适配用户自定义字体大小 - 别只写
max-width，小屏下某些模块需要隐藏（如侧边简介），就用@media (max-width: 480px) { .sidebar { display: none; } }
真正卡住人的往往不是技术点，而是图片没设 max-width: 100% 导致撑破容器，或者字体用了 px 单位在 iOS 上无法缩放——这些细节不检查一遍，响应式就是纸糊的。
