進度條

[Responsive] 為了響應式網頁設計,是否要針對各個不同的裝置大小全部都設斷點(break point)

更新日期:

一般而言不用,

像是Bootstrap 3設計了4個斷點

分別為:

小於768px

大於等於768px 且 小於 992px

大於等於992px 且 小於 1200px

大於等於1200px

 

Google的Material design lite則是三個

分別為:

小於等於480px

大於480px 且小於等於840px

大於840px

 

當然如果有特定機型與尺寸需求是可以多加斷點,

但會增加複雜度,

同時可以善用max-width 來限制最寬,

這樣就算螢幕跑到1920px也可以應付

同時可以省去下載過大圖檔的時間

(以Bootstrap 3來說就是使用 .container 這個class)

https://getbootstrap.com/css/#overview-container