ITHome

[12th 鐵人賽] RWD 的難題 Part 1, Day 24

2 min read CSSITHome鐵人賽2020Grid LayoutGrid SystemCSS Media Query Level 4Media QueryFlexbox
尺寸 對於 RWD 的設計來說，通常最大的問題點在於，你到底要相容多少尺寸，抑或，到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去？ > 通常是不會。 我們在設計所謂的「手機版」跟「桌機版」的情況下，基本上會留下一些能夠相容的尺寸，例如說，從最小的 320px 一直到 414px 會是一種版本，然後到了 600px 直到 768px 會是一種版本，再往上 1024px 到 1200px 會是一種，接著 1200px

[12th 鐵人賽] 實際操作 Part 5, Day 23

2 min read CSSITHome鐵人賽2020Media QueryGrid LayoutGrid SystemRWD
從手機版開始 昨天提到了百分比需要留意的地方，那麼，如果我們依舊使用 ch 為單位的時候，是否需要留意這些尺寸斷點的問題？ > 要。 所以，我們該怎麼計算這種狀況？首先，跟一般的 RWD 狀況一樣，你必須列出一些需要留意的尺寸，接著再決定你的 Grid 單位是否要做額外的設定。如果你覺得 ch 很難掌握，我們把他換成 rem 其實也是一樣的道理。基於我們設定 :root 的 font-size 是 10px，所以我們的 rem 會比較容易換算成

[12th 鐵人賽] 實際操作 Part 4, Day 22

3 min read CSSITHome鐵人賽CSS3Grid LayoutGrid SystemMedia QueryFlexbox
從手機版開始 還記得昨天的狀況嗎？那個 33% 為何會發生這樣的事情？這件事情在小尺寸基本上一定會發生，就端看你剩下的 1% 是不是跟 grid-gap 的寬度 _剛好一樣_，如果是的話，就不會有昨天那個情況。 差別在於那個 grid-template-column 基本上不會計算 grid-gap 的尺寸，所以當你用百分比定義的時候，他是參考整個容器的尺寸來做定義，所以，你就算設定加起來剛好，還是會因為 grid-gap 的關係然後爆掉。 當然是有解法的， grid-template-columns: repeat(auto-fit, [body] calc((100%

[12th 鐵人賽] 實際操作 Part 3, Day 21

4 min read CSSITHome鐵人賽Grid LayoutGrid SystemFlexboxMedia Query
從手機版開始 好的，今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器，所以這邊我們會準備一些內容，大抵上就當作一個文章內容來看看這個區塊。 首先，我們在 .context-wrapper 稍微調整了一下定義， .context-wrapper { display: grid; grid-template-columns: repeat(auto-fit, [body] minmax(40ch, 1fr) [end]); grid-gap: 1rem; grid-column: 1 / 3; } 好的，這樣基本上他會在手機版上面是單一個欄然後逐行顯示我們的內容，這時候針對內文的文字也約略調整一下。

[12th 鐵人賽] 實際操作 Part 2, Day 20

4 min read CSSITHome鐵人賽FlexboxGrid LayoutGrid SystemMedia Query
從手機版開始 在我們開始講內文之前，我們先來看看天地之間的事情。在昨天的例子中，你會發現我的 .header, .footer 都是使用 Flex 來做。這邊並不是說一定得用 Flex 如果用 Grid 就罪該萬死，回顧我一開始提到的， > Grid for layout, flex for components. 再回到 .header 來看，他對我們來說，用上 Grid 其實太過於複雜，我們所想像中的天的設計，最單純的就是 Logo 搭配選單，