說在最前面

網頁這種萬年老埂應該是沒什麼人會看，會想要撰寫這種偏冷門的東西，純粹是個人比較邊緣的關係。目前市面上各種關於網頁製作、切版的工具五花八門，真的會想手動自己來的應該屬於抖 M 屬性（吧）。總之，如果對於網頁製作有興趣，或者是想看看到底在做些什麼東西的人，可以繼續看下去。

至於是不是要看滿 30 天，如果我寫得完的話應該可以考慮按一下追蹤之類的。

大概會說些什麼

• 網頁「設計」在「設計」什麼？
• 給「人類」看的，給「機器」看的有什麼差別？
• 區塊、內文、文件流要流去哪裡？
• 設計為王？內容為王？
• 格線系統到底要給誰用？
• 手機版、桌機版，還有什麼版？
• RWD, AWD 還是 TABLE-WD？
• InAppBrowser 搞什麼？
• Media Query 搞什麼？
• 「單位」與「密度」的問題。
• 再看一次格線系統。

大概不會說些什麼

• HTML, CSS, JS 完全不會講基本操作。
• IE Edge 以下請左轉離開。
• 如果你用 table 製作所有頁面，請放棄網頁製作謝謝。
• 如果你用 position: absolute 製作所有頁面，請放棄網頁製作謝謝。
• 不要問我 position: absolute 為何不能 float: left。
• 不解釋 em, rem, vw, vh。
• 不解釋 flex, grid 與 @media。
• 不解釋 E ~ !F 是什麼。

如果都沒有在被放棄的行列，那麼應該可以繼續看下去。至於為何說 Edge 以下，有鑑於 IE11 真的是爹不疼娘不愛，所以要支援他實在是有點痛苦。加上 Edge 已經往 Chrome 靠攏，所以你知道的。

好請繼續

在這 30 天裡面，如果我自己沒有忘記貼上來的話，你應該可以看到很多關於 Media Query, Grid Layout 跟眾多關於「手機版」的事情。至於為何不是說「行動裝置」，只是因為目前市面上大多數的廠商，好像都還是很愛用「手機版」這個說法。

然後，實際上我們接收到的設計稿，也就真的只有「手機版」跟「桌機版」。那麼，請問一下手機版 1920x3840 跟桌機版 1920x1080 到底是哪個天才！手機螢幕支援 4K Ultra-Wide 不代表你可以用這個尺寸出 AI 好嗎（覺得崩潰）。

超棒的，我說。

Blog 同步刊登：[12th 鐵人賽] 我說那個手機版 Day 1