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) { ... }
感謝您耐心看完
已邀請的邦友 {{ invite_list.length }}/5
首先你要先決定你要的設計模式
想更詳細的介紹可以看回應式網頁設計模式
大多數網站都喜好偏向版面配置位移這個設計模式
而斷點目前只要滿足手機（568px 以下）、平板（768px 以下）、電腦這三個畫面斷點就已經很足夠了
頂多在多個大螢幕（1200px 以上）的斷點
而你寫的斷點是 Bootstrap 提供的斷點，當然你也可以自訂，沒有什麼是一定的，只有用起來直不直覺、舒不舒服而已
其實沒有硬性規定要用哪幾個值來做，只是 768px 算是常用斷點區分平板用的，568px應該是因為手機螢幕越做越大才慢慢調整的，我記得我剛開始切的時候是 480px...
iThome鐵人賽
看影片追技術