用纯HTML+CSS可实现响应式画廊页：采用语义化<figure>结构、统一图片路径、CSS Grid布局（grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))）、必加图片样式（max-width:100%/object-fit/vertical-align）及viewport标签。
直接说结论：用纯 HTML + CSS 就能搭出响应式画廊页，不需要框架、不装依赖、不写 JavaScript——只要图片路径对、类名写准、CSS 媒体查询加到位，就能在手机和电脑上都正常显示。
怎么组织图片结构才不乱？
别用 <div> 套一堆 <img> 然后硬塞 CSS 栅格——小白容易漏掉语义和可访问性。推荐用语义清晰的 <figure> + <figcaption> 包裹每张图：
<figure> <img src="photos/01.jpg" alt="山间小径，晨雾未散"> <figcaption>《雾径》</figcaption> </figure>
-
alt文本必须写，不是摆设——它影响 SEO，更是屏幕阅读器唯一能读的内容 - 所有图片统一放
photos/文件夹下，路径别用../images/或绝对路径，避免本地双击打开时图片加载失败 - 别给
<img>写固定width/height，让 CSS 控制尺寸，否则在小屏上会撑破容器
CSS Grid 实现等宽自适应画廊
用 display: grid 是最稳的方案，比 float 或 inline-block 更少踩坑。关键在两行声明：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
-
minmax(280px, 1fr)意思是：每列最小 280px，最大占满剩余空间——小屏自动缩成 1 列，大屏铺开 3–4 列 -
gap替代margin控制间距，不会触发外边距合并问题 - 别忘了给
<figure>加margin: 0，否则默认上下边距会让布局错位
图片变形、拉伸、模糊？三个 CSS 必加属性
这是小白最常遇到的“图不对劲”问题，根源几乎全是没管好图片渲染行为：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 加
img { max-width: 100%; height: auto; }——强制等比缩放，杜绝横向溢出 - 加
img { object-fit: cover; }（配合设定宽高）或object-fit: contain;（保持完整但可能留白） - 加
img { vertical-align: middle; }——解决<figure>里图片底部多出空白的问题（inline 元素基线对齐导致）
如果用了 object-fit: cover，记得给 <figure> 设定固定高度（比如 height: 200px），否则裁剪不可控。
为什么加了媒体查询还是不响应？
常见原因是漏写了 viewport meta 标签——没有它，移动端浏览器会按桌面宽度渲染，CSS 媒体查询形同虚设：
<meta name="viewport" content="width=device-width, initial-scale=1">
- 这行必须放在
<head>里，且不能写在其他<meta>后面（部分旧版 Safari 对顺序敏感） - 别信“我只在电脑上测试”，真机连 WiFi 打开本地文件（
file://）时，iOS Safari 会禁用部分 CSS 特性，务必用 Live Server 或 Pythonhttp.server启服务预览 - 调试时右键检查元素，看 computed 样式里
grid-template-columns的实际值，别只盯着写的那行 CSS
画廊页真正的复杂点不在布局，而在图片本身：尺寸差异大、命名含空格或中文、路径大小写不一致——这些都会让 <img> 显示为破损图标，却没有任何报错提示。先跑通一张图，再批量复制结构，比一次性扔进二十张图再排查强得多。
