尺寸

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

通常是不會。

我們在設計所謂的「手機版」跟「桌機版」的情況下，基本上會留下一些能夠相容的尺寸，例如說，從最小的 320px 一直到 414px 會是一種版本，然後到了 600px 直到 768px 會是一種版本，再往上 1024px 到 1200px 會是一種，接著 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 公里，剩下的只好明天再說了（欸）。

Blog 同步刊登：[12th 鐵人賽] RWD 的難題 Part 1, Day 24