零基础搭建HTML响应式个人主页（实战项目）-html教程-PHP中文网

必须在中添加viewport meta标签，否则浏览器默认按桌面宽度渲染，导致手机端内容挤压、文字过小、按钮难点击；常见错误包括拼写错误、宽度硬编码或位置错误。

零基础搭建html响应式个人主页（实战项目）

零基础也能搭出能用、能看、能改的响应式个人主页，关键不在学完所有 HTML/CSS，而在于先跑通最小闭环：一个 index.html 文件 + 一段内联 <style></style> + 手动测试不同屏幕宽度。其他都是后续可叠加的优化。

怎么让页面在手机上不缩成一团？用 viewport meta 是硬门槛

没加这行，浏览器默认按桌面宽度（通常是 980px）渲染，再缩放显示在手机上——内容挤、文字小、按钮点不准。这不是 CSS 能修的，是加载第一刻就决定的。

必须在里加上：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

常见错误：

漏掉 name="viewport" 或拼错成 viewpoint
写成 content="width=320" —— 这会锁死宽度，横屏时右侧被切掉
放在里或 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%

示例片段：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<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></picture>` 太重，先用 `srcset` + `sizes`

响应式页面最显眼的破绽就是图片：PC 上高清，手机上看糊；或者手机下载了 2MB 的大图，等半天。

零基础够用的解法是 srcset，它让浏览器自己选图，不用 JS、不依赖第三方库：

@@##@@     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="我的头像">

注意点：