iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

我說那個手機版 系列

我以為我會寫網頁,直到我遇到 InAppBrowser...

鐵人鍊成 | 共 30 篇文章 | 53 人訂閱 訂閱系列文 RSS系列文
DAY 21

[Day 21] 實際操作 Part 3

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

2020-10-05 ‧ 由 閃光洽 分享
DAY 22

[Day 22] 實際操作 Part 4

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

2020-10-06 ‧ 由 閃光洽 分享
DAY 23

[Day 23] 實際操作 Part 5

從手機版開始 昨天提到了百分比需要留意的地方,那麼,如果我們依舊使用 ch 為單位的時候,是否需要留意這些尺寸斷點的問題? 要。 所以,我們該怎麼計算這種狀...

2020-10-07 ‧ 由 閃光洽 分享
DAY 24

[Day 24] RWD 的難題 Part 1

尺寸 對於 RWD 的設計來說,通常最大的問題點在於,你到底要相容多少尺寸,抑或,到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去? 通常是不會。...

2020-10-08 ‧ 由 閃光洽 分享
DAY 25

[Day 25] RWD 的難題 Part 2

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

2020-10-09 ‧ 由 閃光洽 分享
DAY 26

[Day 26] RWD 的難題 Part 3

從手機版到桌機版 講完一些基礎的 Media Query 之後,我們來看看全部都放在一起的一些情況。單就我們 前幾天 提到的狀況,在那個 .sidebar 屬於...

2020-10-10 ‧ 由 閃光洽 分享
DAY 27

[Day 27] 所以說那個手機版

Grid 還是 Flex 我們回歸到行動裝置本身,究竟我們在前端設計的時候,要採用 Grid 還是 Flex 來製作所謂的手機版? 我認真說,如果你是 AWD...

2020-10-11 ‧ 由 閃光洽 分享
DAY 28

[Day 28] 關於 InAppBrowser

InAppBrowser 說在最前面的,以目前的 iOS / Android 生態來看,所謂的 InAppBrowser 大部分的支援程度都還算可以。最主要的差...

2020-10-12 ‧ 由 閃光洽 分享
DAY 29

[Day 29] 還在吵架的 subgrid

Grid 與 subgrid subgrid 是一種很奇妙的跨維度設定,在 w3c 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。 遵從父層格線系統,...

2020-10-13 ‧ 由 閃光洽 分享
DAY 30

[Day 30] 最後的行動裝置

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

2020-10-14 ‧ 由 閃光洽 分享