css - 这个媒体查询到底做了什么

Question

谁能解释一下这个媒体查询是如何工作的？

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

Answer 1

它的规则仅适用于最小宽度为 321px、最大宽度为 1024px 且屏幕方向为纵向的屏幕设备。

实际上，当它处于纵向时，这将是平板电脑大小的屏幕(大于 320 像素宽)。