[12th 鐵人賽] RWD 的難題 Part 1, Day 24
尺寸
對於 RWD 的設計來說，通常最大的問題點在於，你到底要相容多少尺寸，抑或，到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去？
> 通常是不會。
我們在設計所謂的「手機版」跟「桌機版」的情況下，基本上會留下一些能夠相容的尺寸，例如說，從最小的 320px 一直到 414px 會是一種版本，然後到了
600px 直到 768px 會是一種版本，再往上 1024px 到 1200px 會是一種，接著 1200px
2020
[12th 鐵人賽] 實際操作 Part 5, Day 23
從手機版開始
昨天提到了百分比需要留意的地方，那麼，如果我們依舊使用 ch 為單位的時候，是否需要留意這些尺寸斷點的問題？
> 要。
所以，我們該怎麼計算這種狀況？首先，跟一般的 RWD 狀況一樣，你必須列出一些需要留意的尺寸，接著再決定你的 Grid 單位是否要做額外的設定。如果你覺得 ch
很難掌握，我們把他換成 rem 其實也是一樣的道理。基於我們設定 :root 的 font-size 是 10px，所以我們的 rem 會比較容易換算成
[12th 鐵人賽] 實際操作 Part 1, Day 19
從手機版開始
我們今天來講一個比較古老的排版方式，除了天地之間講幹話之外，中間通常還會有一個靠北邊，或是靠南邊的側邊欄。所以我們可以快速的把框架先拉出來。
我們的 HTML 相對簡單，
然後，關於樣式表，
:root {
font-size: 10px;
}
body {
margin: 0;
padding: 0;
font-size: 1rem;
}
* {
box-siz
天
講幹話
[12th 鐵人賽] 模糊地帶, Day 18
總結一下
> 先來一手台啤 18 天謝謝。
這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼樣的場景實際上會需要 @media
呢？大前提就在於，當你需要 變更設計 的時候，你就得明確的使用 @media 來規範你所想要的尺寸，用以達到不同尺寸下，畫面設計上的差異。
當然，@media 不僅是只能做 尺寸
上面的事情，由於這個講起來很佔篇幅，雖然目前還不確定是否可以完賽，但，拿這些來搪塞感覺就不是很好。總之，
[12th 鐵人賽] 這不是 font-size, Day 17
關於文字流
前幾天都提到了關於尺寸的事情，主要都圍繞在 Media Query 與 Grid, Flex
的容器「尺寸」的議題上。我們今天回到一開始的初衷，所謂的「內容為王」這件事情上面。
無論你是使用 RWD, AWD 還是 WD-40，其實免不了的都得考量到文字區塊這件事情。而我們比較常見的操作方式，大抵上都是在每一個斷點（@media
）來設計相關元件的文字顯示方式。舉凡，
* 修改文字大小以符合區塊。
* 將文字隱藏或是截斷。
* 變更容器流向設計，用以符合文字展示。
* 直接輸出 JPG，因為我沒有那個字體。