紀錄工作經驗、相關知識,解決技術相關問題。

CSS, HTML

RWD 斷點 / RWD Breakpoint

製作RWD的首要第一步,便是確認要撰寫幾個尺寸,尺寸越多,當然切換上越細緻,但相對於工序也比較繁多。

如果專案小,基本2~3個尺寸就足夠,如果是屬於品牌視覺比較著重的公司,可能會有到4~5個,以下就提供市面上出現的尺寸給做參考。

裝置斷點尺寸說明常用
4K 螢幕≦ 4096px稀少
2K 螢幕≦ 2048px稀少
PC 桌上型螢幕≦ 1920px主流
筆電≦ 1440px主流
筆電 13吋≦ 1366px主流
平板≦ 1024px主流
手機 (橫向)≦ 768px主流
手機≦ 576px主流
手機≦ 420px較新
手機≦ 375px主流
手機 (直) mini≦ 320px主流
RWD 常用斷點尺寸表

以上斷點,請依實際專案需求選擇使用。

發表迴響