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

Question

目前，bootstrap 为其网格系统/不同尺寸的屏幕设置了断点，以像素为单位：

/* 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，而不是基于像素的断点，因为 em 基于字体大小、缩放和其他几个因素来启用断点。

好吧，归根结底，如果您使用像素，它实际上会那么严格。例如，假设我们有一个类似这样的媒体查询；

@media（最大宽度：500px）{ 这里的规矩... }

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