從手機版開始

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

要。

所以,我們該怎麼計算這種狀況?首先,跟一般的 RWD 狀況一樣,你必須列出一些需要留意的尺寸,接著再決定你的 Grid 單位是否要做額外的設定。如果你覺得 ch 很難掌握,我們把他換成 rem 其實也是一樣的道理。基於我們設定 :rootfont-size10px,所以我們的 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 的話,就能有效的限制內容的呈現方式,當然,如果你永遠都想要讓他 滿版 的話,不這麼限制也沒差。


所以說那個手機版

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

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