响应式 flex 布局需结合 flex-basis 与媒体查询断点：平板设 flex: 0 0 calc(50% - 1rem)，手机设 flex: 0 0 100%，而非仅依赖 flex-wrap。
用 flex 布局做响应式时，别只靠 flex-wrap
很多开发者一想到“适配小屏”就立刻加 flex-wrap: wrap，结果在 iPad 上元素挤成一团、在 iPhone 上又留大片空白。真正起作用的是结合 flex-basis 和断点控制：在平板（768px–1024px）设 flex: 0 0 calc(50% - 1rem)，在手机（flex: 0 0 100%。同时必须给父容器加 gap 替代 margin，否则 Safari iOS 旧版对 margin 的处理会导致换行错位。
grid 的 minmax() + auto-fit 在移动端容易失效
写 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))) 看似聪明，但在部分 Android Chrome（尤其是 WebView 内嵌场景）里会把 minmax() 当成固定值，导致网格列数卡死。稳妥做法是用媒体查询分层定义：@media (max-width: 767px) { grid-template-columns: 1fr; }，@media (min-width: 768px) and (max-width: 1023px) { grid-template-columns: repeat(2, 1fr); }。注意不要漏掉 grid-auto-rows: minmax(100px, auto)，否则高度不一致的卡片在小屏上会拉伸变形。
viewport meta 标签没设对，flex 和 grid 全白搭
常见错误是只写 ，缺了 initial-scale=1。这会导致 iOS Safari 在横屏 iPad 上仍按竖屏宽度渲染，flex 容器算错可用空间。正确写法是：。另外，如果页面有 iframe 或第三方 SDK，它们可能动态注入自己的 viewport 标签，建议用 JS 检查 document.querySelector('meta[name="viewport"]').content 是否被覆盖。
字体和点击区域在小屏上必须手动放大
Flex/Grid 能排好结构，但默认字号在手机上依然难读。别依赖系统缩放，直接用 rem 配合 clamp()：font-size: clamp(0.875rem, 4vw, 1.125rem);。按钮和链接的点击区域也要显式设 min-height: 44px（iOS 最小触控建议值），并用 padding 扩展而非只调 font-size——否则文字在平板上会过大，而触控热区没变。
立即学习“前端免费学习笔记（深入）”；
最常被忽略的是：flex 和 grid 的行为差异在小屏下会被设备像素比（dpr）放大。比如 iPad Pro 的 dpr=2，1px 边框实际占 2 物理像素，但某些 flex 子项的 height: 100% 在渲染时会向下取整，造成 1px 错位。这时候得加 transform: translateZ(0) 强制 GPU 渲染，或者改用 aspect-ratio 控制比例而非固定高宽。
