2017年7月14日 星期五

RWD 回應式網頁設計常用斷點-網頁設計教學


RWD 斷點指的是裝置的螢幕解析呈現的區隔,也就是說手機直式螢幕寬如果為480像素,
那麼480就是斷點,平板直式螢幕寬為768像素,768就是斷點依此類推。
因為工作跟教學常需要這些尺寸,所以特別做個紀錄。
以下為版本更新列表:
  1. 更新版 (更新日期:2023/02/05)
  2. 修正版 (更新日期:2021/09/12)
  3. 簡易版 (更新日期:2020/06/23
使用前強烈建議請先閱讀說明,因網頁排版需求各有不同,設計師的語法撰寫技巧也都有不同觀念,所以使用前請酌量使用。

必須要先在<head>裡加上RWD很重要的meta設定
<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 尺寸,此斷點為修正部分寬度與高度用途,可自行衡量使用。
  1. 1024~1680 (px) 平板橫式、筆記型電腦、桌上型電腦
  2. 980~680 (px) 平板直式、部分智慧型手機橫式
  3. 480~320 (px) 智慧型手機直式
嚴格來說RWD網頁已經變得非常成熟,因使用者螢幕尺寸越來越多元,再加上如果考慮滿版畫面,假如固定在1000像素確實思考不夠周全,所以在個人多方考量之下,增加了1680、1440、1280、1024、980等尺寸。

其斷點的用途如以下說明:
我的開發環境寬度是1920,原則上如果往下縮小到1680應該是沒有太大問題,但是假如遇到版面縮小或是元素需要跟著版面流動的時候,就可能考慮到1680、1440、1280、1024等尺寸。
至於為什麼會多980這個單位,我會提出三個理由來說明,一、考量專案暫時只提供電腦版本網頁瀏覽,二、專案行程考量,三、客戶預算考量等等因素等等,最終的目的是希望可交付進度,但又需要有手機瀏覽的需求!

透過上面的說明我想應該理解,980這個斷點是希望提供iPhone 6/7/8/x 可以瀏覽全畫面但又不會跑版的前提下增加。

最後筆者做一個小小的總結,如果網頁屬於一開始打算 RWD響應式網頁,而且不是滿版頁面,可以考慮簡易版的斷點方法,如果屬於滿版頁面,那麼修正版的斷點規則就可以選擇這個方式。



沒有留言:

張貼留言