响应式Web之断点

断点(breakpoint)是响应式 Web 中的重要概念,我们可以使用媒体查询在断点处改变布局设计,使设计产生两个或更多的变体。

断点是媒体查询中反应视口宽度的数值点,网页设计在断点上将一分为二变成两种变体。端点之间的空间称为设计范围,在此范围内视口宽度对应一种设计变体。

在响应式 Web 中,断点的选择至关重要,因为它决定了我们什么时候适用媒体查询来改变样式。

在选择断点时,不应选择将断点设置为与某些常见设备宽度相同,而是应该确保常见设备宽度能够很简单地落入某一设计范围之内。可以在各类设备上进行测试并以此调整断点。

在进行响应式 Web 时,一个好习惯是,在布局被打乱的时候设置断点,当布局开始出现混乱,我们就应该添加一个断点将其修复。