從手機版開始

昨天提到了百分比需要留意的地方，那麼，如果我們依舊使用 ch 為單位的時候，是否需要留意這些尺寸斷點的問題？

要。

所以，我們該怎麼計算這種狀況？首先，跟一般的 RWD 狀況一樣，你必須列出一些需要留意的尺寸，接著再決定你的 Grid 單位是否要做額外的設定。如果你覺得 ch 很難掌握，我們把他換成 rem 其實也是一樣的道理。基於我們設定 :root 的 font-size 是 10px，所以我們的 rem 會比較容易換算成 px 來做計算。

所以，當我們在行動裝置上，需要設定斷點的時候，你只需要確認一件事情，

什麼時候要變成單欄。

這件事情確認好之後，我們就可以來看看在什麼情況下，瀏覽器會覺得你的 .card 放得下，然後變成超過單欄的情況。假設我們的設定是，

grid-template-columns: repeat(auto-fit, [body] minmax(36rem, 1fr) [end]);

那麼，他的意思就是，

畫面上若單位容器滿足 36rem，換算為 360px 的時候，他就會放上一個 .card。

當畫面寬度滿足 2 個 .card 的時候，他就會變成兩欄，依此類推。

所以，當 不滿足 的情況發生，也就是說，當你的裝置尺寸只滿足 1 個 .card，但是剩下的空間 不足夠 放下第二個的時候，這個時候單位容器的尺寸就會變成 1fr，這個時候你的畫面就會被 1 個 .card 填滿。

所以，我們來列出一些常見的行動裝置尺寸，

• Pixel, 411px
• iPhone 6/7/8, iPhone X, 375px
• iPhone 6/7/8 Plus, 414px
• iPad, 768px
• iPad Pro, 1024px

如果以剛剛的 36rem 來看，你應該就能算出你的 .card 會是什麼呈現方式。

• 1fr
• 1fr
• 1fr
• 1fr
• 36rem 兩欄

往上延伸

基本上尺寸繼續往上延伸，算法也是相同，有個簡單的方式來計算，

<行動裝置寬度> / 36rem 取商數。

若是以 1920px 來計算，扣掉側邊欄位（.sidebar）後為 1710px，得到的結果是，

1710 / 360 = 4.75

所以你會得到 4 個欄為準的單位容器排列方式。這樣，你應該知道要如何計算大尺寸下的容器了。這個時候再搭配 max-width 的話，就能有效的限制內容的呈現方式，當然，如果你永遠都想要讓他 滿版 的話，不這麼限制也沒差。

所以說那個手機版

老實說，樣式表後來都是數學。

數學不會背叛你，不會就是不會。

Blog 同步刊登：[12th 鐵人賽] 實際操作 Part 5, Day 23