小屏交互问题需确保触控区域≥44px、禁用float干扰flex、字号调至18px并设line-height≥1.5、按钮间距≥8px。
小屏下按钮点不中、表单无法聚焦怎么办
根本原因是元素尺寸和间距在移动设备上没适配，手指操作需要至少 44px × 44px 的可触控区域。CSS 默认的 font-size: 16px 和紧凑 padding 在 iPhone 上会让按钮太小、行高太挤。
- 检查所有交互元素（
button、input[type="checkbox"]、a）是否设置了min-width或min-height≥44px - 用
touch-action: manipulation减少移动端点击延迟，尤其对label包裹的input - 避免在小屏上用
:hover作为唯一交互提示——手指没“悬停”概念，必须靠视觉反馈（如:active背景变色）
媒体查询里重排结构时，flex 布局为什么没生效
常见于写了 @media (max-width: 768px) { .container { display: flex; flex-direction: column; } } 却仍横向排列——大概率是父容器或子元素存在 float、position: absolute 或未清除的 display: inline-block 干扰了 flex 上下文。
- 确认目标容器没有被更高优先级规则覆盖（用浏览器开发者工具检查 computed 样式里的
display是否真为flex） - 子元素若设了
float: left，需在媒体查询内显式重置为float: none - 避免嵌套多层 flex：小屏下直接用
flex-direction: column+width: 100%比套两层flex更可靠
用 @media 重排时，字体和行高怎么设才不缩成一团
小屏不是简单“等比缩小”，而是要提升可读性。系统默认的 16px 字体在 320px 宽屏幕上实际渲染可能糊成一片，尤其中文。
- 基础字号建议从
16px改为18px或使用相对单位：font-size: 1.125rem（即 18px，前提是根字号没被强制改小） -
line-height至少设为1.5，避免文字紧贴上下边框；对段落加margin-bottom: 1.25rem替代默认的margin - 慎用
vw单位做字体（如font-size: 4vw），在 iPad 等中屏设备上会突然变大，破坏节奏
@media (max-width: 480px) {
body {
font-size: 18px;
line-height: 1.5;
}
.btn {
min-width: 44px;
min-height: 44px;
padding: 12px 20px;
touch-action: manipulation;
}
.form-group {
margin-bottom: 1.25rem;
}
.grid {
display: flex;
flex-direction: column;
}
.grid > * {
width: 100%;
margin-bottom: 1rem;
}
.grid > *:last-child {
margin-bottom: 0;
}
}
小屏重排最常被忽略的，是触摸目标之间的隔离距离——两个按钮即使各自够大，但如果间距小于 8px，手指容易误触。别只盯着单个元素，得看它们组合后的操作空间。
立即学习“前端免费学习笔记（深入）”；
