Quote:
Originally Posted by Lichen
what exactly is "responsive"? how do you do it?
|
Responsive is when the layout responds to the device you're viewing it with... A small example in Bootstrap 3:
Code:
<div class='col-xs-12 col-md-6 col-lg-3'><img src='..'></div>
<div class='col-xs-12 col-md-6 col-lg-3'><img src='..'></div>
<div class='col-xs-12 col-md-6 col-lg-3'><img src='..'></div>
<div class='col-xs-12 col-md-6 col-lg-3'><img src='..'></div>
Bootstrap has a 12 column grid, the class 'col-xs-12' tells the browser to make the div 12 columns wide, so on a 'xs' (extra small, like a phone) the column would be as wide as the screen.
With 'col-md-6' it will tell the browser to make the div 6 columns wide, so two of them will fit next to eachother.
Finally the 'col-lg-3' tells the browser than on a large screen a div is 3 columns wide, so all 4 divs would fit on one row.
A good example of this is on
http://www.thumbs-up.net/. Play around with the screen width, you'll see what I mean.
So a responsive design is fundamentally different from a mobile redirect to a mobile-ready layout.