CSS With Scale & Ratio
2022-01-20
彙整瀏覽器的縮放比率與螢幕寬度的關聯，並比較 Bootstrap 響應式的螢幕尺寸分斷點。
說明
Scale & Width
| Scale | Width |
|---|---|
| 75% | 2560 |
| 80% | 2400 |
| 90% | 2133 |
| 100% | 1920 |
| 110% | 1745.45 |
| 125% | 1536 |
| 150% | 1280 |
| 175% | 1097.14 |
| 200% | 960 |
| 250% | 768 |
Width = DeviceWidth * 100 / CurrentRatio
例如使用者使用 (width, height) 1920, 1080 解析度的裝置，並將瀏覽器縮放調整為 125%
則使用者瀏覽器的顯示寬度為 1536 pixel。
根據使用者的各種縮放可能以及各式裝置的螢幕寬度，可以用於 RWD 設計上的考量。
| Version | Name | CSS | BreakPoint | MaxWidth |
|---|---|---|---|---|
| BS3 | xs | col-xs-* |
<768px | Auto |
| BS3 | sm | col-sm-* |
≥768px | 750px |
| BS3 | md | col-md-* |
≥992px | 970px |
| BS3 | lg | col-lg-* |
≥1200px | 1170px |
| BS4 | xs | col-* |
<576px | Auto |
| BS4 | sm | col-sm-* |
≥576px | 540px |
| BS4 | md | col-md-* |
≥768px | 720px |
| BS4 | lg | col-lg-* |
≥992px | 960px |
| BS4 | xl | col-xl-* |
≥1200px | 1140px |
| BS5 | xs | col-* |
<576px | Auto |
| BS5 | sm | col-sm-* |
≥576px | 540px |
| BS5 | md | col-md-* |
≥768px | 720px |
| BS5 | lg | col-lg-* |
≥992px | 960px |
| BS5 | xl | col-xl-* |
≥1200px | 1140px |
| BS5 | xxl | col-xxl-* |
≥1400px | 1320px |