grid + minmax() 是最省事的响应式起点，flex + @media 用于兼容兜底，百分比和 float 不该用于新项目；关键代码为 grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr)，需配 gap、设合理断点、真机验证视口。
直接说结论：现在做响应式布局，grid + minmax() 是最省事的起点，flex + @media 是兼容性兜底的刚需，而纯靠百分比或 float 已经不该出现在新项目里。
用 grid 实现免媒体查询的两列自适应
小屏单列、大屏双列，不写断点也能自动切换——关键在 grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr)。
-
minmax(300px, 1fr)表示每列最小 300px，超出部分均分；两列加起来不足容器宽度时，就会自动“挤”成一列 - 必须配
gap，别用margin控制间距，否则小屏下容易触发横向滚动 - IE11 不支持
minmax()和gap，如果要兼容它，这个方案就得放弃 - 真机测试时注意：某些安卓 WebView 对
fr单位解析有偏差，建议最低宽度设为280px而不是300px，留点余量
用 flex + @media 做可控断点
这是目前最稳妥的组合，尤其适合内容密度高、需要精确控制换行时机的场景。
- 断点别硬套“768px”这种设备尺寸，优先观察内容自然折行的位置，通常
max-width: 640px更可靠 -
flex-wrap: wrap必须显式声明，否则子项会强行并排，哪怕溢出视口 - 子项推荐用
flex: 1 1 300px（即flex-grow、flex-shrink、flex-basis），比只设width: 300px更能适应文字长度变化 - 移动端 Safari 旧版本对
gap支持不稳定，此时改用margin并配合nth-child清除最后一行多余间距
为什么不能只靠百分比或 float
不是不能跑通，而是维护成本和意外行为远超收益。
-
float必须清浮动，::after伪元素可能裁掉下拉菜单，overflow: hidden会隐藏position: absolute的子元素 - 百分比布局在嵌套多层时，计算容易失控，比如
width: 50%的子元素再设padding: 5%，盒模型就难预估 - 两者都不支持
gap，靠margin拼间距时，小屏换行后最后一行常因 margin 累加错位 - 真机调试时，iOS 微信内置浏览器对
float的重绘逻辑和 Chrome 不一致，容易漏掉布局塌陷
真正容易被忽略的是视口设置和真机验证——<meta name="viewport" content="width=device-width, initial-scale=1.0"> 少一个字，所有响应式逻辑都白搭；模拟器里看着完美，拿到 iPhone SE 或华为 Mate 50 上点开，才第一次发现字体缩放异常或按钮点击热区偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
