为什么当手机大于 500px 时媒体查询定义为小值？
Why are media queries defined in small values like 500px when phones are greater than that?
在设计网站时，我们经常使用媒体查询来提高网站在不同设备上的响应速度。但是，我注意到大多数媒体查询都是用min-width定义的，而min-width通常有768px、920px等较小的值
我只是看不出这如何使网站移动友好，因为大多数手机的分辨率都很高，以 iPhone X 为例，分辨率为 2436 x 1125 像素。那么媒体查询不是没用吗？某些手机的分辨率几乎与某些显示器相同，甚至更好，这是否意味着网站在某些手机和显示器上看起来应该相同？我到底错过了什么？
这里的像素指的是CSS像素而不是物理像素。 From MDN:
The CSS pixel—denoted in CSS with the suffix px—is a unit of length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible.
当网站使用 <meta name='viewport' content='width=device-width'> 声明时，您实际获得的 CSS 像素比声明的设备分辨率小得多。
例如，对于我的 iPhone，您将获得大约 376 像素的宽度和 635 像素的高度。 phone 本身的分辨率是原来的三倍，因此您可以说它的 设备像素比 为 3。
在设计网站时，我们经常使用媒体查询来提高网站在不同设备上的响应速度。但是，我注意到大多数媒体查询都是用min-width定义的，而min-width通常有768px、920px等较小的值
我只是看不出这如何使网站移动友好，因为大多数手机的分辨率都很高，以 iPhone X 为例，分辨率为 2436 x 1125 像素。那么媒体查询不是没用吗？某些手机的分辨率几乎与某些显示器相同，甚至更好，这是否意味着网站在某些手机和显示器上看起来应该相同？我到底错过了什么？
这里的像素指的是CSS像素而不是物理像素。 From MDN:
The CSS pixel—denoted in CSS with the suffix px—is a unit of length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible.
当网站使用 <meta name='viewport' content='width=device-width'> 声明时，您实际获得的 CSS 像素比声明的设备分辨率小得多。
例如，对于我的 iPhone，您将获得大约 376 像素的宽度和 635 像素的高度。 phone 本身的分辨率是原来的三倍，因此您可以说它的 设备像素比 为 3。