Which Boostrap3 grid mode for mobile/desktop do you use?
Bootstrap 3 comes with 4 grid modes:
In the real world it doesn't depend on the screen resolution but in the device. For example Nexus 5 (1920px) uses XS and an iPad 1 (1024px) uses MD.
I want to make the site responsive, but not use 4 modes (as the site is complex, there are parts that are not usable in mobile at all - ie complex grid of images-). I just want to use only 2 modes: one for desktop (and tablets) and another for Mobiles.
Using Google Canary Emulation mode I found that:
(Yep, Ipad 4 with Retina is MD but Kindle Fire is LG)
Where should i put the limit between mobile and desktop? I mean: MD and below for mobiles and LG for bit tablets and desktop? or SM for mobiles and the rest for big tablets/desktop?...
Thanks!
I think you misunderstand how the grid can be used and you're way overthinking it. The sizes correspond to the way and at what size the columns stack. You can pick and choose and mix it up.
Sometimes it looks better on small devices to stack two images, one after the other. Sometimes leaving them side by side looks better. Just depends on the circumstance and content.
You can choose responsive or non responsive grids if you would like. You can choose to use the img-responsive class on images.
I lifted this little bit from their documentation:
Stacked-to-horizontal
http://getbootstrap.com/css/#grid
"Using a single set of .col-md- grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row."
And of course you can just use media queries to change whatever you want.
I just heard a good point on a Lynda.com course. Start with the largest and smallest first. As stated above start with the smallest grid. Work out that layout for the mobile user then layout the largest grid for the desktop browser. The rest is working how it breaks up and adapts to middle screen sizes.
链接地址: http://www.djcxy.com/p/58752.html上一篇: 你如何构建Haskell中的有状态模块？