屏幕或视口(viewport)尺寸
我的便携机:1366X768
移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-width
表示宽度是设备屏幕的宽度。initial-scale=1
表示初始的缩放比例。- shrink-to-fit=no 自动适应手机屏幕的宽度。
Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-sm- 平板 – 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 – 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 – 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 – 屏幕宽度等于或大于 1200px)
附录:
ipad屏幕分辨率大全
设备 | 分辨率 | 发布时间 |
---|---|---|
iPad 1 | 1024 * 768 | 2010.1.27 |
iPad 2 | 1024 * 768 | 2011.9 |
The New iPad | 2048 * 1536 | 2012.3.8 |
iPad 4 | 2048 * 1536 | 2012.10.24 |
iPad Mini | 1024 * 768 | 2012.10.23 |
iPad Air | 2048 * 1536 | 2013.10.23 |
iPad Mini 2 | 2048 * 1536 | 2013.10.22 |
iPad Air 2 | 2048 * 1536 | 2014.10.17 |
iPad Mini 3 | 2048 * 1536 | 2014.10.16 |
iPad Pro 12.9英寸 | 2732 * 2048 | 2015.9.10 |
iPad Pro 11英寸 | 2388 * 1668 | 2016.6.6 |