鐵人賽

[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 鐵人賽] RWD 的難題 Part 1, Day 24

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

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

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

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

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