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

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 常用斷點尺寸表

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

5 留言

  1. After reading your article, it reminded me of some things about gate io that I studied before. The content is similar to yours, but your thinking is very special, which gave me a different idea. Thank you. But I still have some questions I want to ask you, I will always pay attention. Thanks.

  2. I am an investor of gate io, I have consulted a lot of information, I hope to upgrade my investment strategy with a new model. Your article creation ideas have given me a lot of inspiration, but I still have some doubts. I wonder if you can help me? Thanks.

  3. I am sorting out relevant information about gate io recently, and I saw your article, and your creative ideas are of great help to me. However, I have doubts about some creative issues, can you answer them for me? I will continue to pay attention to your reply. Thanks.

  4. Can you be more specific about the content of your article? After reading it, I still have some doubts. Hope you can help me.

  5. I have read your article carefully and I agree with you very much. This has provided a great help for my thesis writing, and I will seriously improve it. However, I don’t know much about a certain place. Can you help me?

發表迴響