iT邦幫忙

0

CSS RWD 響應式斷點

css

CSS RWD 響應式斷點
看了很多教學影片及文章
但還是不太明白?正規RWD網站要寫多少?響應式斷點Breakpoints?

響應式斷點Breakpoints?要寫多少個?選哪幾個?

很多人都以768PX區分RWD及576px?心中總有疑問怎麼寫RWD才算完整?

RWD大部份都在調整文字大小px?有沒有參考文字大小數值?px

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

感謝您耐心看完

F12按下去拉一拉
內容會跑版就斟酌是否要再多斷點,或是調整方式
建議增加定義 DPI 跟 PPI 的 media+queries 設定,或是乾脆捨棄PX 單位的設定
https://www.google.com/search?q=css+media+queries+dpi
基本上如果要考量多裝置,使用 FLEX BOX 是必要的,但如果對 FLEX BOX 不熟
那放棄 PX 單位也是必要的
4
Mao
iT邦新手 2 級 ‧ 2021-10-03 14:39:59
最佳解答

首先你要先決定你要的設計模式

  • 局部流動 (mostly fluid),隨著螢幕寬度斷點,主體像流體般依序往下排列,通常只設定一個斷點。
  • 欄內容下排 (column drop),最大寬度時呈現橫向排列,隨著螢幕斷點往下推擠排列
  • 版面配置位移 (layout shifter),隨著螢幕寬度斷點,進行版面大幅配置改變
  • 細微調整 (tiny tweaks),隨著螢幕寬度,微調字體大小與按鈕大小 。
  • 畫布外空間利用 (off canvas),以橫向卷軸來操作,在小螢幕時顯示滿版,大螢幕時會排進更多畫面,有點像簡報

想更詳細的介紹可以看回應式網頁設計模式

大多數網站都喜好偏向版面配置位移這個設計模式

而斷點目前只要滿足手機(568px 以下)平板(768px 以下)電腦這三個畫面斷點就已經很足夠了
頂多在多個大螢幕1200px 以上)的斷點

而你寫的斷點是 Bootstrap 提供的斷點,當然你也可以自訂,沒有什麼是一定的,只有用起來直不直覺、舒不舒服而已

ppp896 iT邦新手 5 級 ‧ 2021-10-03 17:21:56 檢舉

中肯,專業,謝謝

0
小魚
iT邦大師 1 級 ‧ 2021-10-03 14:15:37

沒有標準答案,
能抓老鼠就是好貓,
所以首先要先找到老鼠.

0
LucianoLee
iT邦新手 4 級 ‧ 2021-10-04 18:13:17

其實沒有硬性規定要用哪幾個值來做,只是 768px 算是常用斷點區分平板用的,568px應該是因為手機螢幕越做越大才慢慢調整的,我記得我剛開始切的時候是 480px...

我要發表回答

立即登入回答