偏執與強迫症的患者，算不上是無可救藥，只是我已經遇上我的良醫了。

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 鐵人賽] 關於 InAppBrowser, Day 28

InAppBrowser 說在最前面的，以目前的 iOS / Android 生態來看，所謂的 InAppBrowser 大部分的支援程度都還算可以。最主要的差異在於使用了 JavaScript 的差異，跟真正的 瀏覽器 會有點落差。但是，對於樣式表來說，支援度基本上都還會有七八分像，至於不像的部分，那就是看 iOS / Android 給各種 App 的 WebView 是不是有什麼限制。 通常，對於一般用戶來說，在 App 裡面打開網頁這件事情很常見， 你的網站我打不開很爛耶！
  • Hina Chen
    Hina Chen
2 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
CSS

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

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

[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%
  • Hina Chen
    Hina Chen
3 min read
CSS

[12th 鐵人賽] 實際操作 Part 3, Day 21

從手機版開始 好的，今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器，所以這邊我們會準備一些內容，大抵上就當作一個文章內容來看看這個區塊。 首先，我們在 .context-wrapper 稍微調整了一下定義， .context-wrapper { display: grid; grid-template-columns: repeat(auto-fit, [body] minmax(40ch, 1fr) [end]); grid-gap: 1rem; grid-column: 1 / 3; } 好的，這樣基本上他會在手機版上面是單一個欄然後逐行顯示我們的內容，這時候針對內文的文字也約略調整一下。
  • Hina Chen
    Hina Chen
4 min read
CSS

[12th 鐵人賽] 實際操作 Part 2, Day 20

從手機版開始 在我們開始講內文之前，我們先來看看天地之間的事情。在昨天的例子中，你會發現我的 .header, .footer 都是使用 Flex 來做。這邊並不是說一定得用 Flex 如果用 Grid 就罪該萬死，回顧我一開始提到的， Grid for layout, flex for components. 再回到 .header 來看，他對我們來說，用上 Grid 其實太過於複雜，我們所想像中的天的設計，最單純的就是 Logo 搭配選單，
  • Hina Chen
    Hina Chen
4 min read
CSS

[12th 鐵人賽] 模糊地帶, Day 18

總結一下 先來一手台啤 18 天謝謝。 這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼樣的場景實際上會需要 @media 呢？大前提就在於，當你需要 變更設計 的時候，你就得明確的使用 @media 來規範你所想要的尺寸，用以達到不同尺寸下，畫面設計上的差異。 當然，@media 不僅是只能做 尺寸 上面的事情，由於這個講起來很佔篇幅，雖然目前還不確定是否可以完賽，但，拿這些來搪塞感覺就不是很好。總之，
  • Hina Chen
    Hina Chen
5 min read
CSS

[12th 鐵人賽] 這不是 font-size, Day 17

關於文字流 前幾天都提到了關於尺寸的事情，主要都圍繞在 Media Query 與 Grid, Flex 的容器「尺寸」的議題上。我們今天回到一開始的初衷，所謂的「內容為王」這件事情上面。 無論你是使用 RWD, AWD 還是 WD-40，其實免不了的都得考量到文字區塊這件事情。而我們比較常見的操作方式，大抵上都是在每一個斷點（@media）來設計相關元件的文字顯示方式。舉凡， 修改文字大小以符合區塊。 將文字隱藏或是截斷。 變更容器流向設計，用以符合文字展示。 直接輸出 JPG，因為我沒有那個字體。
  • Hina Chen
    Hina Chen
5 min read
CSS

[12th 鐵人賽] Grid 格線系統 Part 4, Day 14

對齊與補白 基本上在格線系統當中，對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了（欸不是）。對齊系列基本上可用的有， 屬性 預設 使用姿勢 justify-items, align-items noemal 容器區塊內的對齊、填滿相關設定。 place-items - 上述兩個屬性的集合寫法 align-items / justify-items justify-content, align-content normal 容器內兩個軸向對齊、填滿相關設定。 place-content - 上述兩個屬性的集合寫法 align-content / justify-content align-self, justify-self
  • Hina Chen
    Hina Chen
6 min read
Grid Layout

[12th 鐵人賽] Grid 格線系統 Part 3, Day 13

間隔、間隔、間隔 先不囉唆，上圖。 中間看起來比較密集的部分，就是所謂的 間隔，在樣式表當中就是這樣設定， .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap: 1rem; } 這邊能夠接受的數值除了 fr 不能用以外，其他數字你要怎麼寫都可以。你也可以把間隔設定的比元件尺寸還要大，但是應該不會有人做這種事情吧。那麼，這個間隔有什麼毛病呢？請你回去看看剛剛那張圖。 看到那個精美的內容衝到間隔裡面了嗎？ 是的，
  • Hina Chen
    Hina Chen
8 min read
CSS

[12th 鐵人賽] Flexbox 的使用姿勢 Part 4, Day 10

各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上，最後來一點大補貼。 justify-content 水平方向的對齊控制。 align-items 垂直方向的對齊控制，需要有 height 設定才看得出效果。 getBoundingClientRect() 拿到子元件的 所有座標點都不是你想的那個樣子。 元件的 margin 會算入自身尺寸， 不會出現 像是一般區塊元件 margin 會互相交疊的情況。 無論哪個方向所產生的間距（gap）都是瀏覽器運算結果，無法人為控制。 子元件若為區塊元件（Block Box），當中若有大於子元件的內容，會干擾子元件尺寸。 子元件若為 Flex 元件（
  • Hina Chen
    Hina Chen
4 min read
CSS

[12th 鐵人賽] Flexbox 的使用姿勢 Part 2, Day 8

流 當我們定義好一個 flex 的容器時，昨天有說過了，預設會使用 row 這個設定來定義容器的流向。所以，在容器定義好的當下，我們把基本的容器設定展開來看，另外，我們賦予他 wrap 的設定，避免當中的元件被切掉， .flexbox { display: flex; flex-direction: row; flex-wrap: wrap; /* 以上等同於 */ /* flex-flow: row wrap; */ width: 100%; } 關於容器內容的流向、邊界、對齊等等，我們可以簡單的說明如下，
  • Hina Chen
    Hina Chen
5 min read
CSS

[12th 鐵人賽] Flexbox 的使用姿勢 Part 1, Day 7

簡單介紹 雖然說 Flexbox 已經推出好一段時間了，但說實在話我自己好像沒有特別著墨。當然，我覺得如果可以的話，去看一下 Amos 的課程，一定比看我在這邊講幹話來得實際！ 首先，我們先理解一下 flex 的作法， .flexbox { display: flex; } 首先是把一個 DOM 元件定義成 flex，這樣接下來的設計才會生效。這個 flex 元件預設會使用 row 這個維度來顯示資料。換句話說，你若什麼都不寫的話，他的 flex-flow 預設就會是
  • Hina Chen
    Hina Chen
7 min read