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

时间:2013-12-07 12:14:10

标签: twitter-bootstrap mobile responsive-design

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用于手机,其余用于大型平板电脑/台式机?...

谢谢!

2 个答案:

答案 0 :(得分:2)

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

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

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

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

<强>堆叠至水平

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

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

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

答案 1 :(得分:0)

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