[12th 鐵人賽] 最後的行動裝置, Day 30

那個行動裝置

雖然我們都概括說是手機版，但 Media Query 其實支援更多裝置的呈現，只是，應該不會有人把 Switch 拿來裝瀏覽器之類的（等等還真的有）。對於 Media Query 來說，Switch 也是一種行動裝置，只是不能打電話而已。

在 Switch 上面裝 Ubuntu

所以，在整個 Media Query 所面對的，更廣泛的說法應該是 輸出裝置，例如大家很熟悉的，

@media print and (min-width: 30cm) {
    /* 這就是給我們泛指的印表機用的 */
    /* 當然印表機也不只一種 */
}

當然輸出裝置千奇百怪，所以就會有許多冷門的功能，但我們碰到的機率比較低，

• scan 輸出裝置有掃描線的，例如電視。
• grid 這不是那個 Grid，是代表輸出裝置是以網格或點陣圖來呈現。
• update 這是針對輸出裝置的更新頻率。

關於顏色的部分還有，

• color 針對輸出裝置的顏色深度（bit）。
• color-index 針對彩色顯示裝置的設定。
• monochrome 針對灰階顯示裝置的設定。
• color-gamut 針對色域的設定。

以上我們都很少用到（但如果你的終端機可以把網頁畫出來，那或許會用到）。

所以說那個手機版

30 天好像都在講廢話，其實也沒有太多時間參加鐵人賽，只是想有個動力可以自虐一下。說到最後，好像 Grid 可以跟 Media Query 脫勾，然後自己出一套樣式就好。至於 Flex 還是多少得依靠 Media Query 來決定斷點在哪裡。

當然，我也有看過一種比較惡趣味的作法，

.grid {
    display: grid;
    grid-template-columns: repeat(100, minmax(10px, 1fr));
    grid-template-rows: repeat(100, minmax(10px, 1fr));
}

然後你就會獲得一個 100 x 100 的 Excel 畫面（欸）。

然後你就可以用這樣固定的格子來把畫面拼出來，有點類似點陣格式畫圖的感覺，然後就可以開始製作你的網頁了。

千萬不要這樣做。

最後感謝大家看完 30 天的幹話。