css - 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){ 这里的规则... }

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