个人网站应优先使用flexbox+语义化html5+媒体查询，因其加载快（380ms）、修改简单、无需构建流程；避免bootstrap（1.2s）和tailwind（950ms）的冗余成本与复杂性。
直接用 Flexbox + 语义化 HTML5 标签 + 媒体查询，别碰 Grid 或框架——对个人网站来说，它够快、够稳、改起来不卡壳。
为什么不用 Bootstrap 或 Tailwind？
它们不是不能用，而是容易让一个本该 3 分钟改完头像的页面，变成“先查文档、再翻 class 名、最后发现样式被全局覆盖”的循环。你只是想放张照片、写段自我介绍、留个邮箱，不需要整套组件库和构建流程。真实场景里，85% 的个人网站更新频率是“一年改两回”，不是“每天热更”。bootstrap.min.css 加载慢 120ms，tailwind.css 里 92% 的 utility class 你根本不会用——这些成本全由你自己默默承担。
实测对比（本地双击打开）：
- 纯 HTML/CSS/JS 单页：首屏加载
380ms（含图片懒加载） - Bootstrap v5.3 SPA 模式：首屏加载
1.2s（含 JS 初始化） - Tailwind + Vite 构建产物：首次加载
950ms，且必须开终端执行npm run build
Flexbox 三栏结构怎么写才不翻车？
很多人抄来就用 display: flex，结果在 iPhone 上侧边栏跑飞、在 iPad 上文字重叠、在 Chrome DevTools 里反复调 flex-basis。关键不在“怎么写”，而在“什么时候关掉它”。
正确做法是：
- 桌面端用
display: flex，主内容区设flex: 3，侧边栏flex: 1 - 移动端（
max-width: 768px）立刻切回flex-direction: column，让侧边栏沉底 - 绝对不要给
flex容器设固定高度；所有高度靠内容撑开 - 头像区域加
object-fit: cover和border-radius: 50%，否则不同尺寸图一塞就变形
示例片段：
<main class="layout-main"><section class="user-profile">...</section><aside class="user-sidebar">...</aside></main><style>
.layout-main { display: flex; }
.user-profile { flex: 3; }
.user-sidebar { flex: 1; }
@media (max-width: 768px) {
.layout-main { flex-direction: column; }
.user-sidebar { order: 3; }
}
</style>
响应式失效时，第一个该查什么？
不是 CSS，不是 JS，是 <meta name="viewport">。90% 的“手机上显示太小”“左右能滑动”问题，都卡在这行没写或写错。
必须放在 里，且只能有一条：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误：
- 漏掉
initial-scale=1.0→ 手机浏览器自动缩放成“小地图”模式 - 写成
width=1200→ 强制按 1200px 渲染，无视设备物理宽度 - 放在
里 → 浏览器直接忽略 - 用了两个 viewport meta → 后者覆盖前者，行为不可预测
语义化标签不是“加分项”，是默认开关
<header></header>、<nav></nav>、<main></main>、<section></section>、<footer></footer> 这些不是为了“显得专业”，而是为了让屏幕阅读器、SEO 抓取器、甚至你半年后自己重看代码时，一眼知道哪块是导航、哪块是正文、哪块是版权信息。
实际影响：
- Google 搜索结果页里，带
<main></main>的页面摘要更准 盲人用户用 VoiceOver 切换 - 你删掉整个
<aside></aside>区域时，不会误删<div class="sidebar"> 里混着的联系方式 <p>别用 <code><div class="main-content"> 代替 <code><main></main>——后者自带语义权重，前者只是个空盒子。真正难的不是写出响应式，而是判断哪些地方“不该响应”：比如邮箱地址，永远要保持可点击、可复制；比如 SVG 图标，放大到 200% 也不能糊；比如表单提交按钮，在任何尺寸下都要有足够点击热区。这些细节，比布局本身更消耗时间。
<section></section> 能跳过重复导航，直奔“关于我”
