Bootstrap 3 - 用于响应式设计和Hi Res Mobile的网格断点

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

好吧，最终，如果你使用的是像素，那么它就会严格要求。例如，假设我们有一个类似的媒体查询;

@media（max-width：500px）{    这里的规则...... }

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