根据MDN's documentation on media queries，只有少数专用于尺寸的功能：width、height、device-width 和 device-height。
过去，device-width 和 device-heigth 可用于媒体查询，理论上这可以用于您尝试做的事情，但是这有 since been deprecated 并且不能在新代码中使用.
剩下的 width 和 height 采用“长度”值。
根据MDN's documentation on "length"，没有对应于屏幕/显示的长度单位。
有“绝对长度单位”，尽可能与实际长度相匹配，或者在不匹配时接近近似值。例如，1px 是 1/96 英寸，或低分辨率屏幕上的 1 个设备像素。
存在与当前字体中特定字符或字体属性的大小相关的“字体相对长度”。例如，1em 等于元素（或在 font-size 属性上指定时的父元素）的当前字体大小。
最后，还有“视口百分比长度”，它与视口的大小有关。虽然这有时与屏幕/显示器的大小相混淆，但这实际上是文档可见部分的大小：专用于显示网页的浏览器部分。因此，1vw 将是页面可见部分宽度的 1%，而100vw 将是页面可见部分宽度。对于 iframe，“视口”是 iframe 的大小。您可以在下面看到这一点：
<code style="background: yellow; display: block; width: 50vw; height: 50vh">
background: yellow;<br>
display: block;<br>
width: 50vw;<br>
height: 50vh
</code>
您也可以在 CSS 的其他地方使用percentages，但所有这些都是采用继承值（父值）并将其乘以该百分比。也就是说，如果父级为100px 宽并且子级将其宽度设置为50%，则子级的宽度将转换为50px。对于媒体查询中的(min|max)-(width|height)，没有可以与之比较的父级，但如果他们伪造了一个，则很可能是视口，例如vw、vh，以及html 使用的百分比。然而，浏览器实际上只是完全忽略了(min|max)-(width|height) 上的百分比，如下所示：
@media (min-width: 1%) {
* { background: yellow }
}
@media (max-width: 100%) {
* { background: red }
}
<code style="display: block">
@media (min-width: 1%) { div { background: yellow } }<br>
@media (max-width: 100%) { div { background: red } }
</code>
还有resolution-related units 可以用于媒体查询（使用resolution），但它们仅限于每长度的点数，例如dpi 表示每英寸点数，而不是总点数屏幕。
与屏幕尺寸相关的媒体查询对于大多数用例来说并没有太大帮助，但是，(min|max)-(width|height) 的最大用例是不同的屏幕尺寸，例如手机、平板电脑、笔记本电脑和大型桌面显示器。在1920x1080 屏幕上有一个max-width: 50% 断点意味着断点将在960px 附近。在 iPhone XS 上，相同的断点将在 207px 附近（CSS 像素，而不是设备像素）。大多数人不会在分屏中使用浏览器，并且大多数（全部？）手机不支持窗口模式或双分屏，因此您永远不会遇到以百分比设置的高度和宽度的断点。除非您使用可以始终换行的百分比和项目，否则您必须在每个媒体查询中指定其他信息才能有用（例如，(max-width: 50%) and (min-width: 50px)）。
这可能对一个使用多个窗口的应用程序有帮助。考虑窗口模式下的 Photoshop 或 GIMP，而不是所有工具栏都在一个窗口中。但即便如此，任何效果都可能仍然可以通过现有的媒体查询实现。
因此，您的问题的答案是我们使用非百分比长度，因为永远不会触发视口断点（视口始终为 100%）并且不存在分辨率断点（例如，屏幕大小的百分比）。一组可用的解析断点媒体查询（device-width 和 device-height）已弃用，不得在新代码中使用。
相反，当页面的可见部分大小不同时，我们使用长度断点来更改设计，无论设备大小。
许多库使用绝对长度（例如，px）而不是相对单位（例如，em），因为大多数开发人员基于像素进行设计。随着时间的推移，出现了向相对单位的转变，但还没有达到临界点。
虽然960px 相当普遍，但此桌面/平板电脑断点已随着时间而改变。很长一段时间以来，网站都被设计为适合1024x768 监视器。考虑到滚动条和浏览器镶边（窗口周围的边框），网站通常设计为1000px 宽，后来980px 变得很常见，原因我不记得了，但如果一些操作我不会感到惊讶出现的系统或浏览器的 chrome 和滚动条宽度加起来超过了24px，或者它可能与当时使用它的流行框架有关。不管怎样，当移动设备变得越来越流行时，设计在网格中工作的网站也开始流行起来，这就是960px is so common nowadays的原因。