Bootstrap - 为什么最小媒体查询 768px？答案

【问题标题】：Bootstrap - why minimum media query 768px?Bootstrap - 为什么最小媒体查询 768px？
【发布时间】：2014-04-07 06:14:48
【问题描述】：

我的手机 (LG G2) 的视口大小为 360 像素 598 像素。 Col-xs 针对小于 768px 的设备，这意味着无论用户处于纵向还是横向模式，他都会得到相同的结果，即使在横向模式下由于其较大的宽度我可以显示更多元素。这就是为什么我想知道为什么在引导程序中最小的媒体查询是 768px，这没有考虑到手机的纵向/横向视图。

感谢您的澄清。

【问题讨论】：

我以为最小值是 480px：getbootstrap.com/customize/#media-queries-breakpoints
不，默认情况下不是，请查看“媒体查询”：getbootstrap.com/css/#grid
那么定制版就适合您。 :)

标签： html css twitter-bootstrap-3 media-queries device-width

【解决方案1】：

虽然 LG G2 “可以”以横向显示更多信息，但这并不是响应式网页设计的本意。

Bootstrap（以及其他相应的）确实选择了这些断点来创建广泛的屏幕尺寸/设备组。他们决定使用 iPad 的纵向宽度（768 像素）作为典型手机和平板电脑之间的断点，这对于工作量非常有意义。响应式网页设计就是要创建这些设备组，不必为成千上万的设备类型编写数百个版本，并且仍然能够为大多数设备创建优化的视图。

当然您仍然可以使用自定义版本，但是您创建的视口组越多，就越需要调整和测试（很快您就会回到用户代理嗅探时代）

【讨论】：

很抱歉，我仍然没有接受您的回答，但您说响应式网页设计不打算这样做。但是大多数手机都允许在横向模式下观看，在这个例子中它并不特定于 LG2。这就是为什么我认为它与 iPad 的断点一样有意义。现在可能已经考虑到用户通常以纵向模式浏览网站，而不是横向模式，因此不值得再维护一个断点。这个论点会更有意义，但我认为这不是你想说的。