CSS

[12th 鐵人賽] 所以說那個手機版, Day 27

Grid 還是 Flex 我們回歸到行動裝置本身,究竟我們在前端設計的時候,要採用 Grid 還是 Flex 來製作所謂的手機版? 我認真說,如果你是 AWD 的話,用 Flex 就綽綽有餘。 如果你是採用 RWD 的話,用 Grid 或許比較方便。 當然,這些事情沒有一定的準則,不然你看看大家 Bootstrap 還不是用得很快樂,有人在意他到底是 Grid 還是 Flex 嗎?

  • Hina Chen
    Hina Chen
4 min read
CSS

[12th 鐵人賽] RWD 的難題 Part 3, Day 26

從手機版到桌機版 講完一些基礎的 Media Query 之後,我們來看看全部都放在一起的一些情況。單就我們 前幾天 提到的狀況,在那個 .sidebar 屬於手機版或桌機版,所呈現的欄位問題來看。 .gird { grid-template-columns: repeat(auto-fit, [body] minmax(36rem, 1fr) [end]); } 一般來說從這裡開始沒有什麼太大的問題,唯一的狀況就在於,當你的 .sidebar 因為 @media 的設定而變成 columns 排列時,你的 .context-wrapper

  • Hina Chen
    Hina Chen
4 min read
CSS

[12th 鐵人賽] RWD 的難題 Part 2, Day 25

尺寸規則 基本常見的尺寸設定會以這些前輟字 max-* 或 min-* 開頭,這個之前就提到過了, min-* 屬性值大於等於。 max-* 屬性值小於等於。 可以使用這些前輟字的有, width 寬度。 height 高度。 aspect-ratio 寬度與高度比,輸入方式是 4/3。 resolution 解析度。 當然,以上也可以不使用前輟字,他就會變成是絕對相符的設定,相對比較少人會這樣使用,舉例來說, @media (width: 360px) { /* 寬度一定要 360px

  • Hina Chen
    Hina Chen
2 min read
CSS

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

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

  • Hina Chen
    Hina Chen
2 min read
RWD

RWD, AWD 與 WD-40

很久沒有寫關於排版的文章,恰巧最近同事間討論到關於畫面資料流( Content Flow )的問題,所以把這個老話題在拿出來嘴一下,順便填充一下部落格的內容。 但,太久沒有寫文章實在是過於生疏。 WD-40 WD-40 超棒噠~ 這個比較跟本文無關,只是為了 WD 的埂而已。 RWD 全名叫做 Responsive web design,從被提出來,距今大概已經 10 年過去了。但是對於這件事情的話題性還是不少,諸多網頁(網站)設計都會提到這個東西。然後就像是戰南北一樣,這件事情也時常拿來跟 AWD 做比較。

  • Hina Chen
    Hina Chen
13 min read
CSS

[CSS] 關於 Grid Layout 的使用姿勢

CSS Grid 其實已經不是什麼很新的東西,只是最近看到有一個實驗性功能,被 Chrome 正式版本採用,覺得好像應該來寫一個筆記文來記錄一下。順便當作是小小的教學文章也可以,反正 CSS 對我來說也從來沒有真正熟悉過。 Grid 網格系統 CSS 自從 Level 3 之後,後續所有發展的項目,都有屬於自己的 Level。所以 CSS Grid 自然就會有自己的一套。正式的名稱叫做 CSS Grid Layout Module Level 1,

  • Hina Chen
    Hina Chen
10 min read