技術 [Day 30] 最後的行動裝置

那個行動裝置 雖然我們都概括說是手機版，但 Media Query 其實支援更多裝置的呈現，只是，應該不會有人把 Switch 拿來裝瀏覽器之類的（等等還真的有...

技術 [Day 25] RWD 的難題 Part 2

尺寸規則 基本常見的尺寸設定會以這些前輟字 max-* 或 min-* 開頭，這個之前就提到過了， min-* 屬性值大於等於。 max-* 屬性值小於等...

技術 [Day 21] 實際操作 Part 3

從手機版開始 好的，今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器，所以這邊我們會準備一些內容，大...

技術 [Day 20] 實際操作 Part 2

從手機版開始 在我們開始講內文之前，我們先來看看天地之間的事情。在昨天的例子中，你會發現我的 .header, .footer 都是使用 Flex 來做。這邊並...

技術 [Day 22] 實際操作 Part 4

從手機版開始 還記得昨天的狀況嗎？那個 33% 為何會發生這樣的事情？這件事情在小尺寸基本上一定會發生，就端看你剩下的 1% 是不是跟 grid-gap 的寬度...

技術 第十六天 使用Media query 實現響應式網頁

何謂響應式網頁，在維基百科上有這樣的定義，響應式網頁(Responsive Web Design，RWD)，是一種網頁設計的技術，這種設計可使網站在不同的裝置（...