iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
0
自我挑戰組

網頁學習日誌系列 第 9

RWD : @media斷點

斷點簡介:

近十年因為手機平板的普及,瀏覽網頁不再是電腦專有,所以才會有響應式網頁。

因為行動載具的螢幕尺寸都不同,因此設計響應式網頁時,要統計分析(如google分析)瀏覽該網站的使用者,是用哪種廠牌的手機、平板較多,再來根據該廠牌手機、平板尺寸作為響應式網頁的斷點,所以斷點會隨著網站訪客的螢幕尺寸而做改變。

因此響應式網頁只能做到滿足多數熱門螢幕解析度為主,無法顧及到全部載具都完美呈現,所以要以滿足80%以上用戶為主。

如果沒有網站分析的話,就以最熱門的解析度為主。

statcounter(http://gs.statcounter.com)
是以分析使用者螢幕解析度的網站,從下圖可看到台灣手機用戶的螢幕尺寸的比率。

https://ithelp.ithome.com.tw/upload/images/20200411/20107321iEIlKlReXl.png

只有手機才顯示的元素:

網站menu清單一旦顯示在手機時,如果用同行排列會讓版面很擁擠,所以才有漢堡選單,他只會出現在手機網頁中。

使用電腦或平板瀏覽網頁時,因為網頁版面寬,如果放漢堡選單收納清單項目,反而讓網站訪客無法立即找到網站清單,造成使用者體驗較差,所以在較大螢幕尺寸的載具都設定隱藏(display:none)

下圖為bootstrap 的nav 漢堡選單:

網站或平板:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321UCqKzlA3Is.png

手機板:

https://ithelp.ithome.com.tw/upload/images/20200411/201073212YC9mg4X6o.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321vpKNkIFhq4.png


上一篇
Git : 上傳資料到Github
下一篇
RWD : 網頁版面轉RWD設定
系列文
網頁學習日誌30

尚未有邦友留言

立即登入留言