[12th 鐵人賽] 所以說那個手機版, Day 27
Grid 還是 Flex
我們回歸到行動裝置本身，究竟我們在前端設計的時候，要採用 Grid 還是 Flex 來製作所謂的手機版？
> 我認真說，如果你是 AWD 的話，用 Flex 就綽綽有餘。
如果你是採用 RWD 的話，用 Grid 或許比較方便。
當然，這些事情沒有一定的準則，不然你看看大家 Bootstrap 還不是用得很快樂，有人在意他到底是 Grid 還是 Flex 嗎？
RWD
[12th 鐵人賽] RWD 的難題 Part 3, Day 26
從手機版到桌機版
講完一些基礎的 Media Query 之後，我們來看看全部都放在一起的一些情況。單就我們 前幾天
[https://blog.hinablue.me/12th-ithome-ironman-day-23/] 提到的狀況，在那個 .sidebar
屬於手機版或桌機版，所呈現的欄位問題來看。
.gird {
grid-template-columns: repeat(auto-fit, [body] minmax(36rem, 1fr) [end]);
}
一般來說從這裡開始沒有什麼太大的問題，唯一的狀況就在於，當你的 .sidebar 因為 @media
[12th 鐵人賽] RWD 的難題 Part 2, Day 25
尺寸規則
基本常見的尺寸設定會以這些前輟字 max-* 或 min-* 開頭，這個之前就提到過了，
* min-* 屬性值大於等於。
* max-* 屬性值小於等於。
可以使用這些前輟字的有，
* width 寬度。
* height 高度。
* aspect-ratio 寬度與高度比，輸入方式是 4/3。
* resolution 解析度。
當然，以上也可以不使用前輟字，他就會變成是絕對相符的設定，相對比較少人會這樣使用，舉例來說，
@media (width: 360px) {
/* 寬度一定要 360px
[12th 鐵人賽] 實際操作 Part 5, Day 23
從手機版開始
昨天提到了百分比需要留意的地方，那麼，如果我們依舊使用 ch 為單位的時候，是否需要留意這些尺寸斷點的問題？
> 要。
所以，我們該怎麼計算這種狀況？首先，跟一般的 RWD 狀況一樣，你必須列出一些需要留意的尺寸，接著再決定你的 Grid 單位是否要做額外的設定。如果你覺得 ch
很難掌握，我們把他換成 rem 其實也是一樣的道理。基於我們設定 :root 的 font-size 是 10px，所以我們的 rem 會比較容易換算成
[12th 鐵人賽] 從響應式的那個東西說起 Day 6
很久很久以前
想當年 Photoshop 可以把圖片輸出成網頁用的東西的時候，你會發現有兩種模式，
 |
 |
 |
 |
 |
 |
 |
 |