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 1, Day 24

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

  • 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 鐵人賽] 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