用 min-width 媒体查询配合 flex: 0 0 50% 实现响应式等分布局：默认子项 width: 100%，在 ≥768px 视口下设为 flex: 0 0 50% 等分，避免 max-width 边界模糊与 device-width 误判，兼顾兼容性与语义清晰性。
用 max-width 和 flex 实现响应式等分布局
直接靠 width: 50% 在平板上切半、手机上占满，行不通——它不随视口变化自动切换。真正可靠的做法是用媒体查询配合弹性容器，让布局行为由断点驱动，而不是靠设备类型猜测。
- 别用
device-width或 JS 检测“是不是 iPad”，CSS 媒体查询只看视口宽度（width），不是设备型号 - 平板常见断点设在
768px到1024px，但以min-width: 768px为起点更稳妥（覆盖小屏平板和横屏手机） - 用
display: flex容器 +flex-wrap: wrap，比浮动或 inline-block 更可控
@media 断点怎么写才不踩坑
很多人把断点写成 @media (max-width: 767px)，结果在 767.5px 的设备上失效——CSS 媒体查询支持小数，但浏览器渲染精度和缩放会让边界模糊。稳妥做法是用「最小宽度」正向定义，避免间隙。
- 手机全宽：默认样式设为
width: 100%，不加任何媒体查询 - 平板半宽：用
@media (min-width: 768px)，里面把子元素设为flex: 0 0 50% - 别写
@media (min-width: 768px) and (max-width: 1023px)——多余限制反而容易漏掉某些横屏大手机
flex: 0 0 50% 比 width: 50% 强在哪
单纯设 width: 50% 在 flex 容器里可能被拉伸或压缩，尤其当内容溢出或有边距时。而 flex: 0 0 50% 明确禁用伸缩、固定基础尺寸，更符合“严格占一半”的意图。
-
flex: 0 0 50%=flex-grow: 0（不放大）、flex-shrink: 0（不缩小）、flex-basis: 50%（基准宽度） - 如果子元素有
margin，记得用box-sizing: border-box，否则 50% + margin 会撑破一行 - 在 Safari 旧版本中，
flex-basis: 50%可能计算异常，可降级为flex-basis: calc(50% - 4px)（若左右各 4px 间距）
实际代码长什么样
下面是最简可用的结构，去掉所有冗余，只留关键声明：
立即学习“前端免费学习笔记（深入）”；
.grid {
display: flex;
flex-wrap: wrap;
}
.grid > * {
width: 100%;
}
@media (min-width: 768px) {
.grid > * {
flex: 0 0 50%;
}
}注意：.grid > * 默认占满，@media 里只改平板及以上行为。没用 float、没用 calc()、没依赖 JS——只要浏览器支持 Flexbox（IE10+ 需加 -ms- 前缀，但现代项目通常已不考虑）。
最常被忽略的是：父容器没设 display: flex，或者子元素写了 width 却忘了在媒体查询里覆盖，导致平板下还是 100%。断点数值本身不重要，关键是“默认手机、增强平板”这个逻辑顺序不能反。
