Css Bootstrap 3-网格断点，用于响应性设计和高分辨率移动

目前，引导程序的网格系统/不同大小屏幕的断点由像素大小设置：

/* 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屏幕，它在一些手机上显示平板电脑或桌面布局，这仍然有点无用。是否有办法通过查看像素密度或类似值来管理此问题？

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

好吧，最终，如果你使用像素，它将严格到如此程度。例如，假设我们有一个类似这样的媒体查询

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

---

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

可能重复感谢这个有用的提示，因为这是我以前没有考虑过的事情，我一定会研究这个。假设我已经指定了最大宽度500px，我应该改为500em吗？不，如果你想指定500px宽度，那么你需要将em视为默认字体大小的一个度量，如果浏览器的正面大小默认为16px，那么它就是1em=16px。因此，为了使用ems实现500px当量，它将是31.250em或500px/16p=31.25em。使用EMS进行响应设计和断点的一个很好的例子是查找基础和如何构造它们的断点。这是另一个用于使用EMS计算的伟大工具。