您使用哪种Bootstrap 3网格模式适用于移动/桌面？

Question

Bootstrap 3带有4种网格模式：

• XS：超小型设备电话（<768px）
• SM：小型设备平板电脑（≥768px）
• MD：中型设备台式机（≥992px）
• LG：大型设备台式机（≥1200px）

在现实世界中，它不依赖于屏幕分辨率，而是依赖于设备。例如，Nexus 5（1920px）使用XS而iPad 1（1024px）使用MD。

我想让网站响应，但不使用4种模式（因为网站很复杂，有些部分根本无法在移动设备中使用 - 即图像的复杂网格 - ）。我只想使用两种模式：一种用于桌面（和平板电脑），另一种用于移动设备。

使用Google Canary Emulation模式我发现：

• XS：BB Z10 / Z30; HTC Evo，Touch HD，Desire HD，Desire; iPhone 3GS / 4/5; Nexus S / 4/5;三星Galaxy Note / S3 / S4;索尼Xperia S
• SM：亚马逊Kindle Fire HD 7; Nexus 7 / 7.2
• MD：BB PlayBook; IPAD 1/2 / iPad Mini; IPAD 3/4
• LG：亚马逊Kindle Fire / Fire HD 8.9“; Nexus 10

（是的，Ipad 4与Retina是MD但是Kindle Fire是LG）

我应该在哪里设置移动设备和桌面设备之间的限制？我的意思是：MD和以下适用于手机和LG适用于平板电脑和台式机？或SM用于手机，其余用于大型平板电脑/台式机？...

谢谢！

Answer 1

我认为你误解了网格是如何被使用的，而你却是在过度思考网格。大小对应于列堆叠的方式和大小。您可以选择并混合它。

有时在小型设备上看起来更好地堆叠两个图像，一个接一个。有时将它们并排放置看起来更好。只是取决于环境和内容。

如果您愿意，可以选择响应式或非响应式网格。您可以选择在图像上使用img-responsive类。

我从他们的文档中解除了这一点：

<强>堆叠至水平

http://getbootstrap.com/css/#grid

“使用一组.col-md - 网格类，您可以创建一个基本的网格系统，该系统首先堆叠在移动设备和平板设备上（从小到小的范围）在桌面（中型）设备上变为水平。将网格列放在任何.row中。“

当然，你可以使用媒体查询来改变你想要的任何东西。

Answer 2

我刚刚在Lynda.com course听到了一个很好的观点。从最大和最小的第一个开始。如上所述，从最小的网格开始。计算出移动用户的布局，然后为桌面浏览器布局最大的网格。剩下的就是它如何分解并适应中等屏幕尺寸。