17370845950

小屏交互问题需确保触控区域≥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，手指容易误触。别只盯着单个元素，得看它们组合后的操作空间。

立即学习“前端免费学习笔记（深入）”；