纯HTML+CSS可构建真正可用的响应式登录页，关键在于保留语义结构、确保label与input严格绑定、避免placeholder替代label、用dvh替代vh、按实际溢出设断点、禁用固定宽、用CSS实现密码切换、失败后焦点回归并关联错误消息。
纯HTML+CSS就能做出真正可用的响应式登录页，关键不在“怎么让盒子变小”，而在「哪些结构必须保留」「哪些CSS规则会悄悄破坏可访问性」。
label for属性绑定失效导致屏幕阅读器跳过输入框
很多模板直接写 <input type="text" placeholder="用户名">，没配 <label></label>，或写了但 for 和 id 不一致。这会让NVDA、VoiceOver完全无法识别字段用途，用户按Tab键时直接跳过密码框。
- 必须为每个
<input>设置唯一id，<label></label>的for值与之严格一致 - 避免用
placeholder替代<label></label>：placeholder 无语义、不支持高对比度模式、缩放后易消失 - 如果视觉上不想显示文字标签（比如只靠图标），用
aria-label或aria-labelledby补充，但不能删<label></label>元素
flex布局居中在iOS Safari里被键盘顶飞
用 display: flex; justify-content: center; align-items: center; 居中整个表单容器，在iOS Safari中键盘弹出时，body 高度不会重算，按钮直接被盖住——这不是bug，是规范行为。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 改用
position: absolute+top: 50%+transform: translateY(-50%)更稳定 - 给
<form></form>加scroll-margin-top: 60px，确保聚焦时浏览器自动滚动到可视区顶部留空 - 禁用
height: 100vh：Safari中vh在键盘弹出时会收缩，导致布局塌陷；改用min-height: 100dvh（2024年起已广泛支持）
响应式断点不是凭感觉设的，而是看真实输入框溢出位置
常见错误是直接套用 768px / 1024px 断点，但实际问题常出现在 420px 左右：密码输入框右侧的「显示密码」按钮被截断，或「记住我」复选框和文字挤成一行后换行错位。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (max-width: 480px)处理手机竖屏核心交互区，重点调输入框 padding、字体大小、按钮高度 - 所有
width尽量用max-width+margin: auto，避免固定像素宽在小屏上强制横向滚动 - 密码可见性切换不要用JS控制 class，用纯CSS方案：
input[type="password"]:focus ~ .toggle-eye配合 sibling 选择器，减少JS依赖
最易被忽略的是：表单提交失败后，焦点必须回到第一个错误字段，并且错误消息要和该字段有明确的 aria-describedby 关联——否则键盘用户根本不知道哪错了。
