常见格栅中屏幕大小对应关系
2019-01-01 本文已影响0人
sun_kk
格栅布局
前端开发中有许多组件库、框架中都是用了格栅布局，来更好的适应不同设备屏幕。
这里总结了几个组件库、框架中的对应关系。
对应关系
Bootstrap
| 格栅号码 | 英文 | 对应的屏幕尺寸 | 可能的设备 |
|---|---|---|---|
| xs | Extra small | <768px | phone |
| sm | Small | 768px and up | tablets |
| md | Medium | 992px and up | desktop |
| lg | Large | 1200px and up | desktop |
NG-ZORRO
Angular 组件库（Ant Design)
| 格栅号码 | 英文 | 对应的屏幕尺寸 | 可能的设备 |
|---|---|---|---|
| xs | Extra small | <576px | phone |
| sm | Small | 576px and up | tablets |
| md | Medium | 768px and up | desktop |
| lg | Large | 992px and up | desktop |
| xl | Extra large | 1200px and up | desktop |
| xxl | Extra large | 1600px and up | desktop |
