我对设备屏幕仿真在 chrome 中的工作原理以及如何使用它来编写负担得起的媒体查询有点困惑。
例如IPhone X
Real device screen-size: 1125x2436px
Emulated device screen-size: 375x812px
我知道像这样的分辨率很容易需要两个全高清屏幕以实际的显示器分辨率(像素密度(以 1：1 的比例显示，但模拟的分辨率不仅仅是缩小的结果，因为如果我放大或缩小视图，像素大小大致相同，这让我认为 chrome 建议我模拟分辨率应该是我的布局参考， 就像它是真实的设备RES。
但如果是，这个分辨率是如何计算的？为什么我应该使用它而不是实际的设备屏幕尺寸？
虽然手机屏幕通常是高分辨率的，如全高清或四高清，但它们的浏览器视口不是，而是Chrome在开发人员工具中显示的分辨率。
这有助于您在设置 CSS 媒体查询时，因为您不必处理每个特定设备的每个分辨率。
但如果是，这个分辨率是如何计算的？
它只是给定设备的实际屏幕分辨率的缩小版本。
为什么我应该使用它而不是实际的设备屏幕尺寸？
因为视口的实际分辨率是那个分辨率，而不是设备屏幕大小。
您可以在此处阅读有关此内容的更多信息：https://mediag.com/blog/popular-screen-resolutions-designing-for-all/