Bootstrap 3带有4种网格模式:
> XS:超小型设备电话(< 768px)
> SM:小型设备平板电脑(≥768px)
> MD:中型设备台式机(≥992px)
> LG:大型设备台式机(≥1200px)
在现实世界中,它不依赖于屏幕分辨率,而是依赖于设备.例如,Nexus 5(1920px)使用XS,而iPad 1(1024px)使用MD.
我想使网站响应,但不使用4种模式(因为网站很复杂,有些部分根本不可用于移动设备 – 即图像的复杂网格 – ).我只想使用2种模式:一种用于桌面(和平板电脑),另一种用于移动设备.
使用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用于手机,其余用于大型平板电脑/台式机?…
谢谢!
最佳答案 我认为你误解了网格是如何被使用的,你就是在过度思考网格.大小对应于列堆叠的方式和大小.您可以选择并混合它.
有时它在小型设备上看起来更好,一个接一个地堆叠两个图像.有时将它们并排放置看起来更好.只是取决于环境和内容.
如果您愿意,可以选择响应式或非响应式网格.您可以选择在图像上使用img-responsive类.
我从他们的文档中解除了这一点:
堆积对水平
http://getbootstrap.com/css/#grid
“使用一组.col-md-网格类,您可以创建一个基本的网格系统,在桌面(中型)设备上变为水平之前,首先堆叠在移动设备和平板设备上(从小到小的范围).任何.row中的网格列.“
当然,您可以使用媒体查询来更改您想要的任何内容.