Recent posts

[12th 鐵人賽] 實際操作 Part 1, Day 19

從手機版開始 我們今天來講一個比較古老的排版方式,除了天地之間講幹話之外,中間通常還會有一個靠北邊,或是靠南邊的側邊欄。所以我們可以快速的把框架先拉出來。 我們的 HTML 相對簡單, <main class="main"> <header class="header"> <p>天</p> </header>

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

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

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

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

[12th 鐵人賽] 這不是 Media Query, Day 16

Media Query 這件事情應該是講到爛掉了,我們稍微複習一下就好, @media (min-width: 32rem) {} 收工(欸)! 爾或者是, /* 請不要這樣做 */ @media (min-width: 90ch) {} 等等好歹也解釋一下 ch 好的,這邊這個單位 ch 是一種字元長度單位,但是他不代表你的 字有多長,以下是 w3c 的解釋, Equal to the used advance measure of the

[12th 鐵人賽] Grid 格線系統 Part 5, Day 15

關於自動這件事 我們昨天有提到 dense 這件事情,我們今天繼續腦補一下這個東西該怎麼把玩。首先,先以一個簡單的例子來開場,這是沒有使用 dense 的設定所產生的畫面, 在這邊我們只有把 .item-2 跟 .item-3 動過手腳, .grid .item-2 { grid-row: 1 / span 2; grid-column: 1 / span 3; background: orange; } .grid .item-3 { grid-row: auto / span 2;

[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