Bootstrap的响应式断点:
极小设备portrait phones(576px,默认)、小型设备landscape phones(≥576px)、中型设备tablets(≥768px)、大型设备desktops(≥992px)、超大设备large desktops(≥200px)。
Ant design 的屏幕断点:
屏幕断点划分为320、576、768、992、1200。
2.3 断点的应用示例
以下这段代码,通过媒体查询的方式,指定了不同分辨率下字体大小的变化。这段代码对应的布局方案中,屏幕断点是1024,1100,1280,1366,1440,1680,1920。
通过以上可以看出,屏幕断点并不是固定的。在产品设计中,可参考成熟设计规范中的断点,也可根据实际需要定义自己的屏幕断点。一般可通过用户调研和市场调研,确定目标用户所使用的主要设备,以此来定义屏幕断点。
三、自适应设计的实现方法从实现技术角度,弹性布局、自适应布局、流式布局、响应式布局、网格布局,为多端适配提供了可能性。这部分前端开发的知识,感兴趣的同行可自行了解。从技术实现的核心,可以总结出以下6种设计手法。