css – 断点如何在现代高分辨率设备上运行?

现代手机和平板电脑的分辨率非常高.

例如,我的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;
  }
}

我的手机是如何显示网络的“响应式”版本的,尽管它的分辨率可以说比大多数桌面显示器大?从示例中,我的手机似乎总是以“桌面”模式显示该网站.

最佳答案
来自文章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.

也可以看看:

> A tale of two viewports — part one
> A tale of two viewports — part two

转载注明原文:css – 断点如何在现代高分辨率设备上运行? - 代码日志