这个媒体查询究竟做了什么

Question

有人可以解释此媒体查询的工作原理吗？

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait)

Answer 1

此规则仅适用于最小宽度为321像素，最大宽度为1024像素且屏幕方向为人像的屏幕设备。

在实践中，当它是纵向时，这将是一个平板大小的屏幕（宽度超过320像素）。

Answer 2

当使用deivce时，规则仅适用于屏幕（不适用于打印机等）：321px＆lt;设备宽度＆lt; 1024和纵向。