17370845950

应使用视口宽度断点：手机@max-width:767px、平板@min-width:768px and max-width:1023px、桌面@min-width:1024px；配合flex-direction/column、flex-wrap/wrap及rem动态根字体实现响应式布局。

怎么用 @media 区分手机和平板断点

手机和平板的区分不能只看“是否是移动端”，关键在视口宽度。主流做法是用两个断点：max-width: 767px（手机），min-width: 768px 且 max-width: 1023px（平板），再加一个 min-width: 1024px（桌面）。注意：iPad 竖屏是 768px，横屏是 1024px，所以平板样式必须覆盖这两个方向。

常见错误是只写 @media (max-width: 768px)，结果 iPad 竖屏被当成手机，横屏又没匹配到任何规则，布局错乱。

• 手机断点建议用 @media (max-width: 767px)（避免和 iPad 竖屏重叠）
• 平板断点用 @media (min-width: 768px) and (max-width: 1023px)
• 别依赖 device-width，它受缩放、UA 欺骗影响大，优先用 width 或 viewport 宽度
• 在 中确认已设置：

display: flex 在不同断点下怎么改方向和换行

弹性盒子本身不自动响应，必须配合媒体查询手动调整 flex-direction、flex-wrap 和子项的 flex-basis。比如导航栏在桌面是横向一行，到平板可能需要两行，手机则收成垂直菜单。

• 默认设为 flex-direction: row，手机断点改成 column
• 用 flex-wrap: wrap 允许换行，再配合 flex-basis 控制每项最小宽度（如平板设 flex-basis: 50% 实现两列）
• 避免对所有子项写 flex: 1，它在小屏下会强行挤压内容，应改用 flex: 0 0 auto + 显式宽高
• 注意 align-items 在 column 下会变成“水平对齐”，容易误以为失效

为什么用 rem 配合媒体查询比单纯用 em 更稳

em 是相对父元素字体大小，嵌套深了就难控制；rem 始终相对根元素（html），配合媒体查询动态调 html 的 font-size，就能统一缩放整个布局的比例。

• 在手机断点设 html { font-size: 14px; }，平板设 16px，桌面设 18px
• 所有间距、圆角、内边距用 rem，比如 padding: 1rem 在

  

  手机就是 14px，在平板就是 16px
• 别忘了重置 body 的默认 margin 和 line-height，否则 rem 缩放后文字行高可能溢出
• 慎用 vw 做字体大小——iOS Safari 在横竖屏切换时不会实时重绘，导致字体卡在旧尺寸

实际调试时最常漏掉的三件事

写完媒体查询和 flex 样式，真机测试仍出问题，大概率是这三项没检查：

• Chrome DevTools 的设备模拟器默认开启“Throttle CPU”，会掩盖重排性能问题；切到真实手机用远程调试，才能看到 flex 换行延迟或闪烁
• 某些安卓 WebView 对 flex-wrap: wrap-reverse 支持差，尽量用 wrap + order 替代
• 图片没设 max-width: 100% 和 height: auto，在小屏下直接撑破容器，flex 再怎么调也无济于事