尺寸

對於 RWD 的設計來說,通常最大的問題點在於,你到底要相容多少尺寸,抑或,到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去?

通常是不會。

我們在設計所謂的「手機版」跟「桌機版」的情況下,基本上會留下一些能夠相容的尺寸,例如說,從最小的 320px 一直到 414px 會是一種版本,然後到了 600px 直到 768px 會是一種版本,再往上 1024px1200px 會是一種,接著 1200px 以上基本上都相同。至於最近 FHD/2K/4K 盛行,所以可能還得考慮 1440px, 1920px 或以上的尺寸。

所以,綜觀來看,我們對於 @media 需要考慮到的尺寸就有,

  • 320px
  • 414px
  • 600px
  • 768px
  • 1024px
  • 1440px
  • 1920px

這些尺寸在設計上就必須納入考量,不然前端工程師大概就只能擲茭問馬祖。


斷點規則

斷點規則設計一直以來都是 @media 在樣式表中的,我覺得是相對麻煩的事情。由於樣式表的載入順序的關係,所以除了尺寸的拿捏,規則該怎麼下又是另一個課題。

@media (min-width: 768px) {
}

@media (min-width: 768px) and (max-width: 1024px) {
}

像這樣就會有樣式污染的問題,但我相信專業的前端工程師應該會避開這種狀況。至於你問我什麼地方污染到誰?

你走開,我暫時不想跟你說話。

有興趣可以參考我多年前的 舊文。目前 Media Query 已經來到了 Level 4,我接著會繼續介紹關於 Media Query 到底目前還能做什麼事情。

說個有趣的事情,

@media (hover) {
    ul li {
        color: red;
    }
}

然後你在一些裝置上就會看到 li 是紅色。我在某個奇妙的專案上看過,然後因為權重的關係沒人發現為什麼手機跟電腦的顏色會不一樣。

這個前端一定是個天才!


所以說那個手機版

今天開車拉了總共 268 公里,剩下的只好明天再說了(欸)。