在设计网站时，我们经常使用媒体查询来使网站在不同设备上的响应速度更快。但是，我注意到大多数媒体查询都是用最小宽度定义的，最小宽度通常具有较小的值，例如 768px、920px 等。
我只是看不出这如何使网站移动友好，因为大多数手机都具有非常高的分辨率，以iPhone X为例，分辨率为2436 x 1125像素。那么媒体查询不是没用吗？某些手机的分辨率几乎与某些显示器相同，如果不是更好的话，这是否意味着网站在某些手机和显示器中看起来应该相同？我到底错过了什么？
这里的像素是指CSS像素而不是物理像素。来自 MDN：
CSS像素(在 CSS 中用后缀 px 表示(是一个长度单位，大致对应于单个点的宽度或高度，人眼可以舒适地看到它而不会产生压力，但在其他方面尽可能小。
当网站使用<meta name='viewport' content='width=device-width'>声明时，您获得的实际 CSS 像素比设备声明的分辨率要小得多。
例如，对于我的iPhone，您的宽度约为376px，高度约为635px。手机本身的分辨率是其三倍，因此您可以说它的设备像素比为3。