断点是响应式布局中视口宽度变化的临界区间，需用明确区间（如min-width和max-width组合）避免样式冲突，而非仅用min-width；栅格列宽应严格总和100%，推荐calc(100%/n)计算；堆叠需依赖flexbox或grid并处理gap与换行；须兼顾prefers-reduced-motion及触控目标尺寸。
什么是断点，以及为什么不能只写 min-width
断点不是“某个固定像素值”，而是响应式布局中视口宽度变化的临界区间。只用 @media (min-width: 768px) 容易导致样式重叠或漏覆盖——比如在 768px 处，min-width: 768px 和 min-width: 767px 的规则可能同时生效，造成冲突。
推荐写法是明确区间：@media (min-width: 320px) and (max-width: 767px)（手机）、@media (min-width: 768px) and (max-width: 1023px)（平板）、@media (min-width: 1024px)（桌面）。这样每个断点互斥，避免级联污染。
- 不要用
max-width: 767px单独作为手机断点，它无法覆盖 0–319px 的极小屏（如翻盖手机、手表） - 所有断点必须包含
min-width，否则在 IE 中可能被忽略 - 如果用 CSS 自定义属性做栅格变量，记得在每个媒体查询里重新声明，CSS 变量不继承断点作用域
栅格列宽怎么算才不会出现小数像素错位
栅格系统本质是百分比分配，但浏览器对小数像素的舍入策略不一致，尤其在缩放或高 DPI 屏幕下容易出现 1px 缝隙或换行。
关键原则：列宽总和必须严格等于 100%，且每列宽度应为可被整除的整数百分比（如 12 列系统中，单列用 8.333333% 而非 8.33%）。
- 用
calc(100% / 12)动态计算列宽，比手写8.333333%更可靠 - 外边距（
margin）或内边距（padding）参与布局时，务必用box-sizing: border-box，否则宽度会溢出 - 避免在栅格容器上设
padding后再用width: 100%，改用width: calc(100% - 2rem)显式扣除
如何让 .col-6 在桌面端占半宽、在手机端堆叠成全宽
这不是简单加个 display: block 就能解决的事——堆叠行为依赖于父容器是否启用 flex 或 grid 布局，且需处理间隙（gap）和换行逻辑。
最简可靠方案是用 Flexbox + flex-wrap，配合媒体查询切换 flex-basis：
/* 默认手机：全宽堆叠 */
.col-6 { width: 100%; }
<p>/<em> 平板及以上：双列并排 </em>/
@media (min-width: 768px) {
.grid-row { display: flex; flex-wrap: wrap; }
.col-6 { flex: 0 0 calc(50% - 0.5rem); margin-right: 0.5rem; }
.col-6:nth-child(2n) { margin-right: 0; }
}</p>
- 不要用
float实现栅格，现代浏览器已不推荐，且清除浮动在媒体查询切换时极易出错 -
flex-basis比width更优先控制尺寸，尤其在 flex 容器中 - 如果用 CSS Grid，注意
grid-template-columns在不同断点需完整重写，不能只改某一项
为什么在 Safari 上 @media (prefers-reduced-motion) 会影响栅格动画效果
这不是栅格本身的问题，但常被忽略：当用户开启“减少运动”系统偏好时，Safari 会禁用所有 transition 和 animation，而很多栅格组件（如折叠面板、响应式导航）依赖这些动效做宽度过渡。此时若没降级处理，视觉上会出现突兀跳变。
- 检查栅格相关动效是否包裹在
@media (prefers-reduced-motion: reduce)内，并设transition: none - 避免在媒体查询中用
transform: scale()控制栅格缩放——它会被直接禁用，改用width+height配合overflow: hidden - 真机调试时务必在 iOS 设置 → 辅助功能 → 动态效果中开启“减少动态效果”，模拟真实场景
断点不是写一次就完事的配置项，它必须随内容密度、交互方式、设备输入习惯一起演进；一个没考虑触控目标最小尺寸（48×48px）的栅格，在手机上再“精准”也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
