CSS With Scale & Ratio


  1. 說明
    1. Scale & Width
  2. 參考資料

彙整瀏覽器的縮放比率與螢幕寬度的關聯,並比較 Bootstrap 響應式的螢幕尺寸分斷點。

logo

說明

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

參考資料

Bootstrap 3
Bootstrap 4
Bootstrap 5