断点如何在现代高分辨率设备上工作？
How do breakpoints work on modern high resolution devices?
现代 phones 和平板电脑具有非常高的分辨率。
例如，我的 Galaxy S7 Edge 的分辨率为 1440 x 2560 像素。
移动设备的常见断点似乎在 768 像素左右，例如 bootstrap。
示例来自 bootstrap.css：
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
为什么我的 phone 显示 "responsive" 版本的网站，即使它的分辨率可以说比大多数桌面显示器都大？从这个例子来看，我的 phone 似乎总是以 "desktop" 模式显示网站。
来自文章A pixel is not a pixel is not a pixel...
I do know what web developers are interested in, however. They need
CSS pixels. That is, the “pixels” that are used in CSS declarations
such as width: 300px or font-size: 14px.
These pixels have nothing to do with the actual pixel density of the
device. They’re essentially an abstract construct created specifically
for us web developers.
It’s easiest to explain when we consider zooming. If the user zooms
in, an element with width: 300px takes up more and more of the
screen, and thus becomes wider and wider when measured in device
(physical) pixels. In CSS pixels, however, the width remains 300px,
and the zooming effect is created by expanding CSS pixels as much as
is needed.
另请参阅：
现代 phones 和平板电脑具有非常高的分辨率。
例如，我的 Galaxy S7 Edge 的分辨率为 1440 x 2560 像素。
移动设备的常见断点似乎在 768 像素左右，例如 bootstrap。
示例来自 bootstrap.css：
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
为什么我的 phone 显示 "responsive" 版本的网站，即使它的分辨率可以说比大多数桌面显示器都大？从这个例子来看，我的 phone 似乎总是以 "desktop" 模式显示网站。
来自文章A pixel is not a pixel is not a pixel...
I do know what web developers are interested in, however. They need CSS pixels. That is, the “pixels” that are used in CSS declarations such as
width: 300pxorfont-size: 14px.These pixels have nothing to do with the actual pixel density of the device. They’re essentially an abstract construct created specifically for us web developers.
It’s easiest to explain when we consider zooming. If the user zooms in, an element with
width: 300pxtakes up more and more of the screen, and thus becomes wider and wider when measured in device (physical) pixels. In CSS pixels, however, the width remains 300px, and the zooming effect is created by expanding CSS pixels as much as is needed.
另请参阅：