Bootstrap 3带有4种网格模式:
在现实世界中,它不依赖于屏幕分辨率,而是依赖于设备。例如,Nexus 5(1920px)使用XS而iPad 1(1024px)使用MD。
我想让网站响应,但不使用4种模式(因为网站很复杂,有些部分根本无法在移动设备中使用 - 即图像的复杂网格 - )。我只想使用两种模式:一种用于桌面(和平板电脑),另一种用于移动设备。
使用Google Canary Emulation模式我发现:
(是的,Ipad 4与Retina是MD但是Kindle Fire是LG)
我应该在哪里设置移动设备和桌面设备之间的限制?我的意思是:MD和以下适用于手机和LG适用于平板电脑和台式机?或SM用于手机,其余用于大型平板电脑/台式机?...
谢谢!
答案 0 :(得分:2)
我认为你误解了网格是如何被使用的,而你却是在过度思考网格。大小对应于列堆叠的方式和大小。您可以选择并混合它。
有时在小型设备上看起来更好地堆叠两个图像,一个接一个。有时将它们并排放置看起来更好。只是取决于环境和内容。
如果您愿意,可以选择响应式或非响应式网格。您可以选择在图像上使用img-responsive类。
我从他们的文档中解除了这一点:
<强>堆叠至水平强>
http://getbootstrap.com/css/#grid
“使用一组.col-md - 网格类,您可以创建一个基本的网格系统,该系统首先堆叠在移动设备和平板设备上(从小到小的范围)在桌面(中型)设备上变为水平。将网格列放在任何.row中。“
当然,你可以使用媒体查询来改变你想要的任何东西。
答案 1 :(得分:0)
我刚刚在Lynda.com course听到了一个很好的观点。从最大和最小的第一个开始。如上所述,从最小的网格开始。计算出移动用户的布局,然后为桌面浏览器布局最大的网格。剩下的就是它如何分解并适应中等屏幕尺寸。