纯css图片画廊可行，核心是:checked+label驱动静态切换；缩略图用auto-fit grid响应式布局；全屏依赖极简js触发但样式由:fullscreen控制；隐藏radio需用位移而非opacity确保可访问性。
纯 CSS 图片画廊完全可行，但关键在于放弃“模拟 JS 行为”的思路——比如用 :checked 配合隐藏单选框来驱动状态，而不是试图用 transform + transition 做无状态轮播。真正的无 JS 依赖画廊，本质是「静态结构 + 用户交互触发的样式切换」。
用 :checked + label 实现图册导航
这是最稳定、兼容性最好（IE9+）、且无需监听任何事件的方案。核心是把每张图对应一个隐藏的 <input type="radio">，用 label 关联它；点击 label 就自动触发该 radio 的 :checked 状态，再用相邻/子选择器控制对应图片显示。
- 所有
input[type="radio"]必须有相同name属性，确保单选互斥 -
label的for属性必须严格匹配对应input的id，不能靠位置隐式关联 - 主图区域用
display: none隐藏全部，仅对input:checked + label + .image-panel（或类似结构）设display: block - 缩略图栏建议用
flex+flex-wrap，配合min-width控制换行断点，避免媒体查询爆炸
响应式缩略图网格用 grid-template-columns: repeat(auto-fit, minmax(...)))
别写一堆 @media 手动切列数。现代 CSS Grid 的 auto-fit 能根据容器宽度自动填满可用列，比 auto-fill 更省 DOM 占位。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
-
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))是常用起点：最小 120px，最大均分 - 如果缩略图带文字说明，
minmax()下限建议不小于 140px，否则文字换行错乱 - 在小屏上加
grid-auto-rows: 1fr可防止高度塌陷，尤其当缩略图比例不一致时 - 注意 Safari 15.4 之前对
auto-fit的minmax()解析有 bug，需加-webkit-前缀（但仅限旧版 iOS）
全屏模式靠 :fullscreen 伪类 + object-fit 保图不拉伸
不用 JS 监听 fullscreenchange，直接用 CSS 伪类接管样式。但注意：只有被 requestFullscreen() 触发的元素才进入 :fullscreen，而纯 CSS 无法调用该方法——所以必须保留一个极简按钮（<button onclick="this.closest(" .panel></button>），但它只负责触发，样式逻辑仍在 CSS 中。
- 主图容器设
width: 100vw; height: 100vh;，再用object-fit: contain居中等比缩放 -
:fullscreen下禁用滚动条：body:fullscreen { overflow: hidden; } - 避免对
img直接设width: 100%; height: 100%，会强制拉伸；必须用object-fit - Firefox 对
:fullscreen内部z-index处理特殊，关闭按钮建议用position: fixed+top: 1rem; right: 1rem绕过
最容易被忽略的是焦点管理：键盘用户按 Tab 键时，input[type="radio"] 默认可聚焦，但若你用 opacity: 0 或 visibility: hidden 隐藏它们，就会破坏可访问性。正确做法是用 position: absolute; left: -9999px 移出视口，同时保持可聚焦、可被屏幕阅读器读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
