Hina Chen - HINA::工程幼稚園 (Page 13)

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

Oct 5, 2020 4 min read CSS ITHome 鐵人賽 Grid Layout Grid System Flexbox Media Query

從手機版開始好的，今天我們來聊一下關於 .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; } 好的，這樣基本上他會在手機版上面是單一個欄然後逐行顯示我們的內容，這時候針對內文的文字也約略調整一下。

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

Oct 4, 2020 4 min read CSS ITHome 鐵人賽 Flexbox Grid Layout Grid System Media Query

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

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

Oct 3, 2020 3 min read Grid Layout Grid System CSS ITHome 鐵人賽 2020 Media Query

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

講幹話

然後，關於樣式表， :root { font-size: 10px; } body { margin: 0; padding: 0; font-size: 1rem; } * { box-siz

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

Oct 2, 2020 5 min read CSS ITHome 鐵人賽 2020 Grid Layout Media Query Grid System Flexbox

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

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

Oct 1, 2020 5 min read CSS Media Query font-size clamp ITHome 鐵人賽 2020 Grid Layout Grid System

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