登录页样式问题根源在于响应式缺失与上下文约束忽略：需用width:90%+max-width组合、显式设html/body高度、避免overflow:hidden裁切阴影、字体用rem+clamp适配、按钮禁用text-transform。
登录页容器宽度为什么总在不同屏幕“忽大忽小”
根本原因是用了固定 width: 400px 或 max-width 却没配对响应式约束。移动端撑满、桌面端又太窄，不是设计问题，是容器脱离了视口比例锚点。
- 用
width: 90%+max-width: 420px组合：既保证小屏有呼吸感，又防大屏拉得太开 - 别只设
max-width，一定要加margin: 0 auto，否则在 flex 容器里可能失效 - 如果父容器是
display: grid，需确认是否设置了justify-items: center，否则margin: auto不起作用
box-shadow 在登录框上显得“脏”或“发虚”
不是阴影参数不对，是叠加了默认的浏览器焦点环（:focus-visible）或父层 overflow: hidden 裁切了投影边缘。
- 先加
outline: none到表单控件，再用box-shadow自定义聚焦态，避免双影重叠 - 若容器设了
border-radius: 8px，阴影必须匹配——box-shadow: 0 4px 12px rgba(0,0,0,0.1)比0 8px 24px更干净，后者容易糊边 - 检查父级是否有
overflow: hidden，它会直接剪掉阴影区域；改用clip-path: inset(0)可保留投影
垂直居中登录框时 flex 布局突然失效
常见于把 html 和 body 的默认 height: auto 当成全高，结果 min-height: 100vh 没生效，flex 的 align-items: center 就没参照物。
- 必须显式写
html, body { height: 100%; margin: 0; }，否则vh在某些浏览器（如 safari ios）下计算异常 - 容器用
display: flex; flex-direction: column;时，justify-content: center对子元素有效；但若子元素是form且含display: block默认行为，需额外加margin: auto - 慎用
align-self: center在子项上——它只对直接 flex 子项生效，嵌套一层div就失效
字体大小和行高在登录页里“看着小、读着累”
不是字号设小了，是用了绝对单位（px）+ 忽略了系统字体缩放设置，导致无障碍访问断层，也影响阅读节奏。
立即学习“前端免费学习笔记（深入）”；
- 主文本用
font-size: 1rem（即继承根字号），根元素设font-size: clamp(16px, 4vw, 18px)，兼顾小屏可读与大屏不溢出 -
line-height: 1.5是安全值；若用1.4，中文在 chrome 下易出现行间粘连，尤其搭配font-weight: 500 - 按钮文字别用
text-transform: uppercase，它会压缩字间距、降低识别度，改用letter-spacing: 0.5px更可控
真正难的不是调阴影或居中，而是所有这些样式在不同设备像素比、系统缩放、暗色模式开关下是否还保持一致——建议在开发时打开 Chrome 的“Rendering”面板，勾选“Emulate css media features”，挨个试 prefers-color-scheme 和 forced-colors。