Adaptive layouts are great, but with them,
you need to design multiple fixed layouts
and
take care of each element's width.
Also, you might have noticed a lot
of empty space on both sides of the
content for some screen sizes.
To solve these two problems,
we can use a mix of fluid
and
adaptive layouts. That is,
we can specify the widths in
percentages and use media
queries to change them as needed:
Take a look at this example:
This layout is fluid and below the screen width of 767px, the columns are stacked one below the other instead of next to each other.
Such layouts are called
responsive layouts.
Most modern websites are
either responsive or adaptive.