Question

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

我的Galaxy S7 Edge的分辨率为1440 x 2560像素。

移动设备的常见断点似乎约为768像素，例如bootstrap。

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

我的手机如何显示＆＃34;响应＆＃34;网站的版本虽然它的分辨率可以说比大多数桌面显示器大？从示例中，看起来我的手机总是会在桌面上显示网站＆＃34;模式。

Answer 1

来自文章A pixel is not a pixel is not a pixel ...

但我知道Web开发人员对此感兴趣。他们需要   CSS像素。也就是说，CSS声明中使用的“像素”   例如width: 300px或font-size: 14px。

这些像素与实际的像素密度无关   设备。它们本质上是一个专门创建的抽象结构   对我们网络开发者来说。

最容易解释我们何时考虑缩放。如果用户缩放   在，width: 300px的元素占用了越来越多的元素   屏幕，因此在设备中测量时变得更宽和更宽   （物理）像素。但是，在CSS像素中，宽度保持为300px，   并且通过扩展CSS像素来创建缩放效果   需要。

另见：

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

1 个答案: