總結一下

先來一手台啤 18 天謝謝。

這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼樣的場景實際上會需要 @media 呢?大前提就在於,當你需要 變更設計 的時候,你就得明確的使用 @media 來規範你所想要的尺寸,用以達到不同尺寸下,畫面設計上的差異。

當然,@media 不僅是只能做 尺寸 上面的事情,由於這個講起來很佔篇幅,雖然目前還不確定是否可以完賽,但,拿這些來搪塞感覺就不是很好。總之,我大概列出我大概會操作的方向給大家參考。

  • 從手機版開始,確認一直到大尺寸的畫面中需要的骨幹。
  • 用 Grid 畫完骨幹,畫面上不複雜的話,用 Bootstrap 4/5 做掉就好。
  • 決定文字、區塊流向,確認是否採用 Flex 或需要包裝成巢狀的 Grid。
  • 使用 @media 限制特定尺寸 以下 的容器行為。
  • 開始針對尺寸 往上 發展(往大尺寸發展)。
  • 使用 @media 限制特定尺寸 以上 的單一元件行為。
  • 使用 FontAwesome 或其他 SVG/WebFont 製作 Icon。
  • 使用 avif, webp 新格式,並確認 @3x, @2x 以及 @1x 的存在。
  • 確保相容非先進格式的瀏覽器可正確運作(我不是指 IE11 或舊款 Edge)。

然後我還蠻習慣手刻,所以 Bootstrap 的部分我可能會沒有。但通常為了省事(或是業主的錢不多),基本上還是用一些第三方的工具比較順手,像是 Tailwind 也是不錯的選擇。


或許有人會好奇,何謂變更設計?當然,設計師無法考慮到那麼多裝置尺寸,所以基本上都是抓比較泛用的尺寸來進行設計。那麼,當某些畫面上的元素,基於不同的尺寸下,例如設計師的最大參考尺寸是 1920px 來說,中間或許會經過一個 1440px,而,如果我的尺寸來到 1600px 時,我是該呈現出 1440px 的架構呢?還是可以調整畫面以符合 1600px 的呈現?

通常基於業主的預算,大多都是下縮到 1440px

如果設計師的圖面是四個 column 排成 6 x 4 的話,而 1440px4 x 6 個排列方式。那麼在 1600px 的時候,到底要維持 6 x 4 還是 4 x 6 呢?在這個情況下,無論哪一種排版方式,圖面上的區塊皆不會依照設計圖面的尺寸來走,像是這種時候,你只能回頭看一下你們家的設計師。

確認過眼神,基於業主的預算,就是容器下縮到 1440px

當然,也是會有人來靠么說 1600px 怎麼那麼醜,到底會不會切版。

基於職業道德(沒有預算),我們就說 OK 好就可以了。

我就不會!


模糊地帶的容器

上面所提及的 1920px, 1440px1600px 三種尺寸,最後者 1600px 就是屬於模糊地帶。一來設計師沒有特別針對這樣的尺寸製作,二來業主也不想多付錢。那麼,在容器規則上,講簡單點就是下修到 1440px,但實際上到底會發生什麼事情?

  • 主要尺寸以 1920px 來設計。
  • 當我們是 6 x 4 的時候,簡單的把 1920 / 6 = 320px 當成是一個 column 尺寸。
  • 當下修到 1440px 時,此時的 column 尺寸變成了 1440 / 4 = 360px
  • 如果採用 1440px 套用到 1600px 尺寸上時,單純的 1600 / 4 = 400px,就不符合 1440px 的設計。

這種向下採用的方式,通常在 Mobile First 的設計流程中不會發生,但我舉這個例子比較好理解。

而且絕大多數人,都從桌機版開始 往下 製作。

此時你的容器應該是,

@media (min-width: 1600px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }
}

但是這樣的 1fr 會變成 400px,其實沒關係,我們這邊的目的是要確保 4 x 6 這件事情的發生。接下來,由於 1440px 的規則當中,每個區塊的尺寸是 360px,所以,你在這個尺寸下,就必須要再次包裝你的區塊,確保他符合 360px 這個尺寸。

@media (min-width: 1600px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }
    .item {
        width: 360px;
        height: 360px;
        margin: auto;
    }
}

然後另外一個問題來了,你會發現留白的 間距 變大了,好的,這時候只能針對大容器再次給一個尺寸。

@media (min-width: 1600px) {
    .grid {
        width: 1440px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 1fr);
        margin: auto;
    }
    .item {
        width: 360px;
        height: 360px;
        margin: auto;
    }
}

然後大容器可能跟其他人也歪掉了,逼不得已只好在 <body> 第一層包一個超大的 <div class="super">

@media (min-width: 1600px) {
    .super {
        /* 請不要這樣做 */
        width: 1440px;
        margin: auto;
    }
}

多想兩分鐘,你可以不要一直包一直包。

以上一直包的事情,如果是 Mobile First 基本上不會發生,僅會發生一次設定尺寸為 1440px 而已。至於為什麼?後面幾天我再來聊一下由行動裝置開始的這件事情。


所以說那個手機版

連續吃兩天和牛有點膩。

通常這種時候,比較偏向 AWD 的人就會覺得,幹嘛搞得那麼複雜,就行動裝置一套,電腦一套就好了。說實在的也沒有不可以,但,當我收到用 1152px 設計的手機版之後,我就再也不相信這種鬼話了。

當然,如果業主可以接受 1152px 以下都顯示為手機版,我也沒啥意見。