应使用视口宽度断点：手机@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宽度 - 在
<head>中确认已设置：<meta name="viewport" content="width=device-width, initial-scale=1">
display: flex 在不同断点下怎么改方向和换行
弹性盒子本身不自动响应，必须配合媒体查询手动调整 flex-direction、flex-wrap 和子项的 flex-basis。比如导航栏在桌面是横向一行，到平板可能需要两行，手机则收成垂直菜单。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 默认设为
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 再怎么调也无济于事
