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

Question

Bootstrap 3 具有 4 种网格模式：

\n\n

\n
• XS：超小型设备手机 (<768px)
\n
• SM：小型设备平板电脑 (\xe2\x89\xa5768px)
\n
• MD：中型设备桌面 (\xe2\x89\xa5992px)
\n
• LG：大型设备桌面 (\xe2\x89\xa51200px)
\n

\n\n

在现实世界中，它并不取决于屏幕分辨率，而是取决于设备。例如，Nexus 5 (1920px) 使用 XS，iPad 1 (1024px) 使用 MD。

\n\n

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

\n\n

使用 Google Canary 模拟模式我发现：

\n\n

\n
• 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
\n
• SM：亚马逊 Kindle Fire HD 7；Nexus 7 / 7.2
\n
• MD：BB PlayBook；IPAD 1/2/iPad 迷你；平板电脑3/4
\n
• LG：亚马逊 Kindle Fire /Fire HD 8.9\xe2\x80\xb3；Nexus 10
\n

\n\n

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

\n\n

移动端和桌面端的界限应该放在哪里？我的意思是：MD 及以下适用于手机，LG 适用于平板电脑和台式机？或者 SM 用于手机，其余用于大型平板电脑/台式机？...

\n\n

谢谢！

\n

Answer 1

我认为您误解了网格的使用方式，并且您想得太多了。尺寸对应于柱堆叠的方式和尺寸。你可以挑选并混合它。

有时，在小型设备上，一张接一张地堆叠两张图像看起来会更好。有时让它们并排看起来更好。就看具体情况和内容了。

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

我从他们的文档中摘录了这一点：

水平堆叠

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

使用一组 .col-md-网格类，您可以创建一个基本的网格系统，该系统开始时堆叠在移动设备和平板设备（超小到小范围）上，然后在桌面（中型）设备上水平放置。任何行中的网格列。”

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