您使用哪种用于移动/桌面的 Boostrap3 网格模式？答案

【问题标题】：Which Boostrap3 grid mode for mobile/desktop do you use?您使用哪种用于移动/桌面的 Boostrap3 网格模式？
【发布时间】：2013-12-07 12:14:10
【问题描述】：

Bootstrap 3 自带 4 种网格模式：

在现实世界中，它不取决于屏幕分辨率，而是取决于设备。例如，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；连结 S/4/5；三星盖乐世 Note / S3 / S4；索尼 Xperia S
SM：亚马逊 Kindle Fire HD 7； Nexus 7 / 7.2
MD：BB 剧本； IPAD 1/2/iPad Mini； IPAD 3/4
LG：亚马逊 Kindle Fire /Fire HD 8.9″； Nexus 10

（是的，配备 Retina 的 Ipad 4 是 MD，而 Kindle Fire 是 LG）

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

谢谢！

【问题讨论】：

你在上面提到 iPad1 使用“md”，我不知道这是不是真的，但我知道最新的 iPad 实际上使用“sm”网格，这让我绝对抓狂，无论如何改变那个？？
嗨，我没有真正的设备来测试它。该列表由 Chrome 模拟器详细说明。据我所知，无法更改它，因为它来自屏幕分辨率加上设备像素比之间的关系。该比率在 Ipad 1 中为 1，在 3/4 和其他视网膜中为 2。我认为用户可以在其浏览器配置中更改它，但您不能要求所有使用您网页的人都这样做...

【解决方案1】：

我认为您误解了如何使用网格并且您想太多了。大小对应于列堆叠的方式和大小。您可以挑选并混合使用。

有时在小型设备上将两张图像一张接一张堆叠起来会更好看。有时将它们并排放置看起来更好。只是看情况和内容。

您可以根据需要选择响应式或非响应式网格。您可以选择在图像上使用 img-responsive 类。

我从他们的文档中提取了一点：

水平堆叠

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

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

当然，您可以使用媒体查询来更改您想要的任何内容。

【讨论】：

您好，感谢您的回答。可能我以错误的方式表达自己。我的问题来自这样一个事实，即 Ipad 4 使用 SM 模式，而其他平板电脑（如 Nexus 10）使用 LG 模式。对于用户而言，Ipad 和 Nexus 10 属于同一类别，并且（从我的角度来看）它们都应该使用比 SM 模式更接近的 LG 模式。我想知道其他人是否在 .col-md-grid 中启动“桌面模式”或在 .col-sm-grid 中启动它（因此 Ipad 4 将站点显示为桌面）或在 .col 上启动它-lg-网格。因此，我的问题是在哪里设置可修改模式和桌面模式（XS、SM、MD 或 LG）之间的区别！
@4lberto，还要考虑横向与纵向以及它们在这些设备上的显示方式。再说一次，我认为你想多了。对我来说，我个人认为 col-md 是标准的桌面尺寸。低于它的任何东西都是移动布局。 md 和上面的任何东西我都视为桌面。所以真的是768和更大的东西。然后我查看，有时堆叠的内容在部分中不太有效，所以我会相应地更改我的 div - xs-col-6 或 col-md，甚至像 'div class="col-xs-6 一样混合起来col-sm-6 col-md-3'
是的，有些设备会以您意想不到的方式显示内容。所以你尽你所能，找到一个好的折衷方案。
谢谢！然后我会以MD为部门，不再关心单独适应每个设备。再次感谢！
4lberto，很高兴我能帮上忙。不要忘记将答案标记为有用或已接受;)

【解决方案2】：

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

【讨论】：