CSS Media ( @media ) query prevent the the CSS inside it to run unless browser qualify the containing test.

For Exp:

@media ( max-width:1024px){
//CSS for screen size upto 1024px for ALL desktops, Ipad & Tablets( Landscape mode only).
}

@media  ( max-width:800px){
//CSS for screen size upto 800px for Smart Phones, Android & I phones (Landscape Mode only)
}

@media  ( max-width:786px){
//CSS for screen size upto 786px for All Ipad & Tablets( Portrait mode only),
}

@media  ( max-width:480px){
//CSS for screen size upto 480px All Smart Phones, Android & I phones( Portrait mode only),
}

To create a responsive webpage using css media query, Start writing,
HTML CODE
<div class="container">
<div class="header"><a href="#">
<img src="" alt="Insert Logo" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" /></a>
</div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p> This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version..</p>
</div>
<div class="content">
<h1>Header 1</h1>
<p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.</p>
<h2>Header 2</h2>
<p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.</p>
<h3>Header 3</h3>
<p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.</p>
<p> This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.. </p>
<p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.</p>
<h4>Header 4</h4>
<p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.</p>
</div>
<div class="footer">
<p>This .footer contains the declaration position:relative; to give Internet Explorer 6 has Layout for the .footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
</div>
</div>



Now Write Following CSS

@media ( max-width:1100px){
.container{ width:750px}
.header{width:750px}
.sidebar1{ width:150px}
.content{ width:600px}
.footer{width:750px}
ul.nav a{ width:130px}
.header img{ width:150px}
}
@media ( max-width:750px){
.container{ width:480px}
.header{width:480px}
.sidebar1{ width:130px}
.content{ width:340px}
.footer{width:480px}
ul.nav a{ width:110px}
.header img{ width:130px}
.content p{ font-size:14px}
}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}

ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; padding-right: 15px;
padding-left: 15px; }
a img { border: none;
}

a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}

.container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
}

.header1 {
background-color:#ADB96E;
}

.sidebar1 {
float: left;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {

padding: 10px 0;
width: 780px;
float: left;
}

.content ul, .content ol {
padding: 0 15px 15px 40px;
}

ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background-color: #ADB96E;
color: #FFF;
}

.footer {
padding: 10px 0;
background-color: black;
color:#ccc;
position: relative;
clear: both;
}

.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

The following Page will look like:
(This is not actual look of the page,
to view actual responsive page, click following link,
CLICK HERE )

Header 1

Header 2

Header 3

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version..
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.