[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 天的干话。

Blog 同步刊登：[12th 铁人赛] 最後的行动装置, Day 30