[12th 鐵人賽] 模糊地帶, Day 18

總結一下

先來一手台啤 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 的話，而 1440px 是 4 x 6 個排列方式。那麼在 1600px 的時候，到底要維持 6 x 4 還是 4 x 6 呢？在這個情況下，無論哪一種排版方式，圖面上的區塊皆不會依照設計圖面的尺寸來走，像是這種時候，你只能回頭看一下你們家的設計師。

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

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

基於職業道德（~~沒有預算~~），我們就說 OK 好就可以了。

我就不會！

模糊地帶的容器

上面所提及的 1920px, 1440px 及 1600px 三種尺寸，最後者 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 以下都顯示為手機版，我也沒啥意見。

總結一下

模糊地帶的容器

所以說那個手機版

You might also like...