Basic concept of liquid css and design

Theory:-

Hello Guys, hope you doing well.

Today i explain the basic concept of liquid design which make your web page totally fluid and looks good in all screen sizes.

Fonts sizes issue:-
Good question!! if we stick with our liquid design principles we’ll need to use relative font units. Our choices are:

1:-Em's
2:-%'s
3:-ex's
4:-css keywords

What is Liquid Design?

The term "Liquid" means a webpage should flow smoothly in all screen sizes.

<style>
body { font-size:1.5em;}

.top_header { background:#666; color:#fff; min-height:50px; width:100%; float:left; padding:15px 0px;}
.block1 { width:50%; float:left; background:#033; min-height:50px;}
.block2 { width:50%; float:left; background:#090; min-height:50px;}

.middle_part { background:#CCC; width:100%; float:left; padding:15px 0px;}
.left_part { min-height:100px; float:left; width:30%; background:#960;}
.right_part { min-height:100px; float:left; width:70%; background:#690;}


.footer_part { background:#930; float:left; width:100%; padding:30px 0px;}
.col1 { background:#999; width:33.333%; float:left; min-height:300px;}
.col2 { background:#333; width:33.333%; float:left; min-height:300px;}
.col3 { background:#CCC; width:33.333%; float:left; min-height:300px;}


@media screen and (max-width:980px) { body { font-size:1.4em;}}

@media screen and (max-width:767px) { body { font-size:1.2em;}}

@media screen and (max-width:480px) { body { font-size:0.8em;}}




</style>

<div class="top_header">
<div class="block1"> header left
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
<div class="block2"> header right
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
</div>

<div class="middle_part">
<div class="left_part"> left part
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
<div class="right_part"> right part
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
</div>

<div class="footer_part">
<div class="col1"> footer first
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
<div class="col2"> footer second
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
<div class="col3"> footer third
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
</div>

Example:- Just resize your window and see effects

DEMO:- http://jsfiddle.net/csszilla/RQrsk/8/embedded/result/