Responsive layout

Different devices have different screen space, on smartphones a vertical layout might be advantageous over a horizontal. How can we create a responsive layout that automatically determines the screen width and adapts content accordingly, without messing around with media queries and having to customize the layout for each browser?
5 answers


Use Boostrap, it introduces screen size dependent css classes. Boostraps grid divides the screen in 12 units. With this example you can have a screen layout that automatically stacks the divs if the screen width is below 768px.

<div class="container-fluid"> <div class="row">
<div class="col-sm-4" style="background-color:green;">.col-sm-4</div> <div class="col-sm-4" style="background-color:red;">.col-sm-4</div> <div class="col-sm-4" style="background-color:green;">.col-sm-4</div>