CSS

[12th 鐵人賽] 最後的行動裝置, Day 30

那個行動裝置 雖然我們都概括說是手機版,但 Media Query 其實支援更多裝置的呈現,只是,應該不會有人把 Switch 拿來裝瀏覽器之類的(等等還真的有)。對於 Media Query 來說,Switch 也是一種行動裝置,只是不能打電話而已。 在 Switch 上面裝 Ubuntu 所以,在整個 Media Query 所面對的,更廣泛的說法應該是 輸出裝置,例如大家很熟悉的, @media print and

  • Hina Chen
    Hina Chen
2 min read
CSS

[12th 鐵人賽] 還在吵架的 subgrid, Day 29

Grid 與 subgrid subgrid 是一種很奇妙的跨維度設定,在 w3c 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。 遵從父層格線系統,跳出現有維度形成單一欄(或行)的區塊。 子格線系統跟父層格線系統共享格線設定。 子格線系統格線總量與他所跨維度的父層格線軌跡相同。 若子網格系統跨維度軌跡固定,則取父層格線軌跡的跨度起始值。 若子網格系統跨維度不固定,則取父層格線軌跡跨度起算為 1。 子網格系統起算的 <數字> - <位置> 是獨立在自己的網格系統內。 子網格若是被填充在父層格線系統之前,那麼子網格軌跡會使用父層格線系統的格線命名,但這些名稱必須要是子網格系統以外的名字。 子網格系統的命名若跟父層格線系統重疊,

  • Hina Chen
    Hina Chen
1 min read
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 鐵人賽] RWD 的難題 Part 1, Day 24

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

  • Hina Chen
    Hina Chen
2 min read