RWD 斷點指的是裝置的螢幕解析呈現的區隔，也就是說手機直式螢幕寬如果為480像素，
那麼480就是斷點，平板直式螢幕寬為768像素，768就是斷點依此類推。
因為工作跟教學常需要這些尺寸，所以特別做個紀錄。
以下為版本更新列表：
- 更新版 (更新日期：2023/02/05)
- 修正版 (更新日期：2021/09/12)
- 簡易版 (更新日期：2020/06/23)
使用前強烈建議請先閱讀說明，因網頁排版需求各有不同，設計師的語法撰寫技巧也都有不同觀念，所以使用前請酌量使用。
必須要先在<head>裡加上RWD很重要的meta設定
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
以下是需要加入到CSS樣式表檔中或是<style></style>。
簡易版加入414尺寸。
簡易版 (更新日期：2020/06/23)
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 992px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 680px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 414px) {}
@media screen and (max-width: 320px) {}
本次增加1680、1440、1280、1024、980等尺寸，移除992尺寸
修正版 (更新日期：2021/09/12)
@media screen and (max-width: 1680px) {}
@media screen and (max-width: 1440px) {}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 980px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 680px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 414px) {}
@media screen and (max-width: 320px) {}
本次增加820、375尺寸
更新版 (更新日期：2023/02/05)
@media screen and (max-width: 1680px) {}
@media screen and (max-width: 1440px) {}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 980px) {}
@media screen and (max-width: 820px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 680px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 414px) {}
@media screen and (max-width: 375px) {}
@media screen and (max-width: 320px) {}
更新版說明：
因iPad 第9代與第10代的尺寸比iPad mimi大，故增加820像素，而第九代與第十代的Retina 顯示器的直式寬度僅差20像素，換算網頁瀏覽尺寸為10像素，因此加入820像素。
另外375像素為對應iPhone13 mini 尺寸，此斷點為修正部分寬度與高度用途，可自行衡量使用。
- 1024~1680 (px) 平板橫式、筆記型電腦、桌上型電腦
- 980~680 (px) 平板直式、部分智慧型手機橫式
- 480~320 (px) 智慧型手機直式
嚴格來說RWD網頁已經變得非常成熟，因使用者螢幕尺寸越來越多元，再加上如果考慮滿版畫面，假如固定在1000像素確實思考不夠周全，所以在個人多方考量之下，增加了1680、1440、1280、1024、980等尺寸。
其斷點的用途如以下說明：
我的開發環境寬度是1920，原則上如果往下縮小到1680應該是沒有太大問題，但是假如遇到版面縮小或是元素需要跟著版面流動的時候，就可能考慮到1680、1440、1280、1024等尺寸。
至於為什麼會多980這個單位，我會提出三個理由來說明，一、考量專案暫時只提供電腦版本網頁瀏覽，二、專案行程考量，三、客戶預算考量等等因素等等，最終的目的是希望可交付進度，但又需要有手機瀏覽的需求！
透過上面的說明我想應該理解，980這個斷點是希望提供iPhone 6/7/8/x 可以瀏覽全畫面但又不會跑版的前提下增加。
最後筆者做一個小小的總結，如果網頁屬於一開始打算 RWD響應式網頁，而且不是滿版頁面，可以考慮簡易版的斷點方法，如果屬於滿版頁面，那麼修正版的斷點規則就可以選擇這個方式。
沒有留言:
張貼留言