從手機版開始
昨天提到了百分比需要留意的地方,那麼,如果我們依舊使用 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
的話,就能有效的限制內容的呈現方式,當然,如果你永遠都想要讓他 滿版 的話,不這麼限制也沒差。
所以說那個手機版
老實說,樣式表後來都是數學。
數學不會背叛你,不會就是不會。