不用框架也能快速搭出真响应式登录页，关键在viewport、flex布局加一个媒体查询；漏写viewport元标签会导致@media和flex全部失效，手机仅显示桌面宽度的1/3。
直接说结论：不用框架也能快速搭出真响应式登录页，关键在 viewport、flex 布局 + 一个媒体查询就够了，Bootstrap 反而容易让新手掉进 class 堆砌陷阱。
为什么 viewport 不写就一定不响应
很多“看起来能缩放”的页面其实只是浏览器自动缩放，不是真正的响应式。核心卡点就在 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 这一行。漏掉它，max-width、flex-wrap 全部失效——手机上永远显示桌面宽度的 1/3，输入框挤成一条线。
- 必须放在
里，且不能被 JS 动态插入（部分 iOS Safari 会忽略） -
initial-scale=1.0不能省，否则安卓 WebView 默认缩放为 0.8–0.9 - 别信“移动端自动适配”，没有这行，
@media规则里的max-width: 480px实际匹配的是设备物理像素宽度，不是逻辑视口宽度
flex 居中卡片比 margin: auto 更可靠
用 margin: auto 在 flex 容器里居中卡片，看似简单，但一旦加了 padding 或 border 就容易偏移；而 display: flex + justify-content: center + align-items: center 是真正基于内容盒计算的居中方式，兼容性从 Chrome 21 / Firefox 20 起就稳了。
- 外层容器设
min-height: 100vh，避免内容少时卡片悬空 - 卡片本身用
flex-direction: column管理表单流，比浮动或 inline-block 更可控 - 别给卡片设固定
height，否则小屏上按钮被切掉——让内容撑开高度
移动端输入框字体太小？不是 font-size 的问题
iOS Safari 对 <input type="text"> 和 <input type="password"> 有最小字体限制（默认 16px），强行设 font-size: 14px 会被无视。真正生效的是 text-size-adjust: 100% + 显式声明 font-size：
.login-input {
font-size: 16px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
- 只对
<input>和<textarea></textarea>生效，<p></p>不需要 - Android Chrome 76+ 已默认关闭缩放，但 iOS 仍需此声明
- 配合
input[type="email"]和input[type="password"]，还能触发软键盘类型优化（邮箱键盘 / 密码键盘）
一个 @media 就够用，别堆 5 个断点
实测绝大多数登录页只需要区分「手机」和「非手机」两档。用 @media (max-width: 767px) 覆盖所有竖屏手机和折叠屏展开态，再加一条 @media (hover: hover) 区分触屏/非触屏设备做 hover 效果即可。
- 别抄 Bootstrap 的 5 档断点（576px/768px/992px/1200px/1400px），登录页根本用不到那么细的粒度
-
767px是为了避开 iPad mini 的 768×1024 分辨率（横屏时仍算桌面端） - 按钮在手机端设
width: 100%，但留margin: 0 16px，避免贴边导致误触
真正难的不是写代码，是判断哪些样式该进媒体查询、哪些该全局写——比如 box-sizing: border-box 必须全局，而 padding 的数值才需要按屏幕调整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
