屏幕或視口(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 |