设备屏幕分辨率如何在 CSS 中缩放？
How do device screen resolutions scale in CSS?
以下是几款流行手机的屏幕分辨率：
iPhone 6：1334 x 750
三星 Galaxy S5：1920x1080
在 CSS 中，我们有像这样的媒体查询：
@media only screen (max-width:600px)
这是针对小屏的，上面这两款手机还有反应吗？显然它们的宽度远远超过 600px。所以我的问题是，如果发生这种缩放，它是如何发生的？我觉得我在这里缺少 CSS 的基本概念。
编辑：我知道 @media screen 实际上要求的是 window 大小而不是设备分辨率。我的问题可以更恰当地表述为 "how does the window size scale in phone browsers?"
我相信，你需要阅读 this...
更重要的是，关于缩放和像素游戏，请阅读 A Pixel Is not Pixel
摘录/思考点
For pages that set an initial or maximum scale, this means the width
property actually translates into a minimum viewport width. For
example, if your layout needs at least 500 pixels of width then you
can use the following markup. When the screen is more than 500 pixels
wide, the browser will expand the viewport (rather than zoom in) to
fit the screen
另外，
However, there are two tricky bits: the device-width media query and
the
width="device-width"> tag. Both work with device pixels, and not with
CSS pixels, because they report on the context of the web page, and
not on its inner CSS workings.
我刚才也在想同样的问题，所以我将总结一下我的发现。原来是一个很好的答案，所以我希望它能有所帮助。
像素本身已经变得相对了。拥有高像素密度的手机屏幕并不意味着您会自动在小屏幕上浏览大型网站。像素密度用于设置确定网页将使用多少像素。
Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.
那么我们的意思是什么？ CSS 像素已经成为一个与实际像素解耦的网格单元。而且我们应该将像素密度设置为一个值，该值将使我们清楚地看到我们正在查看的屏幕尺寸，而与我们实际拥有的像素数量无关。作为 Web 开发人员，这就是我们设置视口的原因，它通过将像素数量除以像素密度来设置相对网格。因此，具有 640 像素宽度和 2.0 像素密度的设备将显示 320 像素宽的屏幕。
现在怎么办？
有两种方法可以解决这个问题。就像我说的，首先是设置视口。但随着设备越来越大，这将导致移动网站的屏幕尺寸可能不适用于完整的移动布局。
另一种选择是忽略它并开始响应式设计。有两个、三个或四个屏幕尺寸，您希望您的布局在这些尺寸上发生变化并坚持下去。如果您必须针对某些屏幕尺寸进行研究（例如：您希望 ipad 横向成为您的正常网页吗？）然后从那里开始。
哪个更好？我会说设置视口，因为这样可以确保显示正确的内容，而不管实际像素数量如何。
进一步阅读
- 可以在 http://www.devicepixelratio.com/
找到设备像素比的（非详尽）列表
- Apple 设备屏幕尺寸 http://stephen.io/mediaqueries/
- 可以在 gamon.org.
上找到关于它的明确文章
以下是几款流行手机的屏幕分辨率：
iPhone 6：1334 x 750
三星 Galaxy S5：1920x1080
在 CSS 中，我们有像这样的媒体查询：
@media only screen (max-width:600px)
这是针对小屏的，上面这两款手机还有反应吗？显然它们的宽度远远超过 600px。所以我的问题是，如果发生这种缩放，它是如何发生的？我觉得我在这里缺少 CSS 的基本概念。
编辑：我知道 @media screen 实际上要求的是 window 大小而不是设备分辨率。我的问题可以更恰当地表述为 "how does the window size scale in phone browsers?"
我相信，你需要阅读 this...
更重要的是，关于缩放和像素游戏，请阅读 A Pixel Is not Pixel
摘录/思考点
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen
另外，
However, there are two tricky bits: the device-width media query and the width="device-width"> tag. Both work with device pixels, and not with CSS pixels, because they report on the context of the web page, and not on its inner CSS workings.
我刚才也在想同样的问题，所以我将总结一下我的发现。原来是一个很好的答案，所以我希望它能有所帮助。
像素本身已经变得相对了。拥有高像素密度的手机屏幕并不意味着您会自动在小屏幕上浏览大型网站。像素密度用于设置确定网页将使用多少像素。
Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.
那么我们的意思是什么？ CSS 像素已经成为一个与实际像素解耦的网格单元。而且我们应该将像素密度设置为一个值，该值将使我们清楚地看到我们正在查看的屏幕尺寸，而与我们实际拥有的像素数量无关。作为 Web 开发人员，这就是我们设置视口的原因，它通过将像素数量除以像素密度来设置相对网格。因此，具有 640 像素宽度和 2.0 像素密度的设备将显示 320 像素宽的屏幕。
现在怎么办？
有两种方法可以解决这个问题。就像我说的，首先是设置视口。但随着设备越来越大，这将导致移动网站的屏幕尺寸可能不适用于完整的移动布局。
另一种选择是忽略它并开始响应式设计。有两个、三个或四个屏幕尺寸，您希望您的布局在这些尺寸上发生变化并坚持下去。如果您必须针对某些屏幕尺寸进行研究（例如：您希望 ipad 横向成为您的正常网页吗？）然后从那里开始。
哪个更好？我会说设置视口，因为这样可以确保显示正确的内容，而不管实际像素数量如何。
进一步阅读
- 可以在 http://www.devicepixelratio.com/ 找到设备像素比的（非详尽）列表
- Apple 设备屏幕尺寸 http://stephen.io/mediaqueries/
- 可以在 gamon.org. 上找到关于它的明确文章