虽然我们都概括说是手机版,但 Media Query 其实支援更多装置的呈现,只是,应该不会有人把 Switch 拿来装浏览器之类的(等等还真的有)。对於 Media Query 来说,Switch 也是一种行动装置,只是不能打电话而已。
所以,在整个 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
>>: [JS] You Don't Know JavaScript [Scope & Closures] - Limiting Scope Exposure ?
在 Day 9 我们使用 Order API 建立了一笔测试订单。 在送出请求的 JSON 字串是这...
Build a CPU tags: IT铁人 抽象化设计 建构一台电脑时,他要能执行所有指定ISA的...
UserDefault是一种临时储存的功能,类似於我们打开游戏第一次会出现的新手教学那样,基本上他只...
各位参赛选手~我是今天的主播 小笠宏树!各位准备好了!!!3 2 1 ~ 比赛开始! 今天来推脑洞神...
不管是哪一家软件公司或是金物流厂商,只要他们有提供 API 介面来服务外部网站,通常一定会有串接文件...