先來一手台啤 18 天謝謝。
這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼樣的場景實際上會需要 @media 呢？大前提就在於，當你需要 變更設計 的時候，你就得明確的使用 @media 來規範你所想要的尺寸，用以達到不同尺寸下，畫面設計上的差異。
當然，@media 不僅是只能做 尺寸 上面的事情，由於這個講起來很佔篇幅，雖然目前還不確定是否可以完賽，但，拿這些來搪塞感覺就不是很好。總之，我大概列出我大概會操作的方向給大家參考。
@media 限制特定尺寸 以下 的容器行為。@media 限制特定尺寸 以上 的單一元件行為。avif, webp 新格式，並確認 @3x, @2x 以及 @1x 的存在。然後我還蠻習慣手刻，所以 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以下都顯示為手機版，我也沒啥意見。
Blog 同步刊登：[12th 鐵人賽] 模糊地帶, Day 18
iThome鐵人賽
看影片追技術