知识卡片

移动优先的响应式断点级联

专业/工作 · 171

内容

Bootstrap的响应式栅格断点只用min-width媒体查询定义、不设上限,某个尺寸的样式一旦在小屏生效就会延续到更大屏幕,直到被更大断点的同名样式覆盖。这种”向大兼容”的级联顺序是移动优先设计的技术根基:先写好最小屏幕的默认样式,再用递增的min-width逐级覆盖,而不是反过来给每个区间划定上下限。

参考来源

《深入理解Bootstrap》第2章《整体架构》