Bootstrap 3-网格断点响应设计和高分辨率移动

Question

当前引导程序为其网格系统/按像素大小设置的不同大小屏幕设置断点：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

然而，由于手机现在是超高分辨率的，有时有1080p屏幕，它在一些手机上显示平板电脑或台式机的布局，这仍然有点无用。有没有办法通过观察像素密度或类似的方法来管理这一点？

Answer 1

您可以考虑设置Em而不是基于像素的断点，因为ems是基于字体大小、缩放和其他几个因素来启用断点的。

最终，如果你使用像素，它会非常严格。例如，假设我们有一个类似的媒体查询；

@媒体（最大宽度：500px）{这里的规则。。。}

它将强制500px作为断点，而不管基本字体大小或缩放级别如何。你可以想象，如果你的用户放大到10倍，浏览器的宽度仍然是断点的决定因素，那么这可能会成为一个问题，所以它可能会完全破坏你设计精美的网站。