格栅布局
前端开发中有许多组件库、框架中都是用了格栅布局,来更好的适应不同设备屏幕。
这里总结了几个组件库、框架中的对应关系。
对应关系
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 |