Media Query

[12th 鐵人賽] 我說那個手機版 Day 1

2 min read ITHome鐵人賽2020Media QueryGrid LayoutGrid System
說在最前面 網頁這種萬年老埂應該是沒什麼人會看，會想要撰寫這種偏冷門的東西，純粹是個人比較邊緣的關係。目前市面上各種關於網頁製作、切版的工具五花八門，真的會想手動自己來的應該屬於抖 M 屬性（吧）。總之，如果對於網頁製作有興趣，或者是想看看到底在做些什麼東西的人，可以繼續看下去。 至於是不是要看滿 30 天，如果我寫得完的話應該可以考慮按一下追蹤之類的。 大概會說些什麼 * 網頁「設計」在「設計」什麼？ * 給「人類」看的，給「機器」看的有什麼差別？ * 區塊、內文、文件流要流去哪裡？

[CSS] Media Query Level 4

2 min read Media QueryCSS Media Query Level 4
今年的 Draft 有更新，所以就繼續記錄一下。其實，我比較希望 CSS Selector Level 4 能趕快支援，不然我的 Level 4 筆記都已經一年多了，想起來真是讓人內牛滿面（欸 -------------------------------------------------------------------------------- > https://www.w3.org/TR/mediaqueries-4/ 最新的更新是 2016/01/26 還算有在更動（看看隔壁棚的 Grid Layout（最後更新

[CSS] 彈性化的 Media Query

10 min read Media QueryCSS
好像是該來交點作業，不然部落格都快壞掉了（甚至熊熊想不起來 Octporess 要怎麼 deploy 到 Heroku 上 原先是想說要先寫一點 Media Query Level 4 的介紹，不過因為還沒有玩膩所以就先不要寫了（欸，由於寫文章的時候剛好是自己生日，所以，就先祝自己生日快樂。 然後我們聊一下彈性的 Media Query。 -------------------------------------------------------------------------------- 前言 導讀， > The EMs have it! Proportional Media Query

[CSS3] 深入 @viewport 與 @media queries

9 min read Media QueryviewportCSS
說在最前面，這是要詳細交代這兩件事情的關係，不過由於目前 CSS Device Adaptation [http://www.w3.org/csswg/css-device-adapt/] 還在草稿（W3C Working Draft）階段，所以以後或許還是會有變化。 這是很悶的詳細解釋文，所以理論上可以跳過。 @viewport and @media 還是一個重點， > @media depends on @viewport size. 但是由於 @viewport 這件事情，雖然他有許多設定可以用，

[CSS] 淺談 @viewport 與 @media

9 min read Media QueryviewportCSS
由於最近剛好遇到這件事情，索性整理一下。一般來說 viewport 大多數人會想到 Media Query 這件事情，但是，我覺得還是有必要澄清一下。其實 viewport 跟 Media Query 並沒有太大或是絕對的相依關係，只是由於裝置與一些規則應用上的關係，讓人覺得這兩件事情好像是可以擺在一起看的。 實際上不是。 -------------------------------------------------------------------------------- 何謂 viewport 根據 w3c 對於 CSS Device Adaptation [http://www.w3.org/TR/