Quel codage css pour un site responsive?

Bonjour,

J'ai conçu un site internet que je souhaiterais rendre responsive. J'ai lu que je dois insérer du @media queries dans mes pages css. Or je ne sais pas comment coder ensuite afin que mon site soit lisible sur une tablette et un mobile. Je donne ci-après une copie de ma page index.css où on peut voir qu'il y a un logo, un menu horizontal déroulant, un menu vertical ou sidebar à gauche, un contenu et un footer. Certes, lors de la diminution de l'écran, le sidebar disparaîtra sans doute ou apparaîtra autrement (cependant, ce sidebar renvoie vers des articles importants). Quant au menu horizontal déroulant, il apparaîtra fatalement sur deux lignes.
Un spécialiste de la question pourrait-il m'aider à mettre les bons codes pour réussir ce responsive. Je l'en remercie infiniment par avance.

Copie page index:

#logo{
padding-top: 10px;
padding-bottom: 15px;
text-align: left;
}
#barre-menu{
width: 960px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #1F618D;
}
h5{
font-size: 16px;
color: #4A235A;
display: inline-block;
}
#menu-vertical ul{
width: 17%;
float: left;
padding-top: 30px;
margin-right: 10px;
padding-bottom: 40px;
height: 700px;
padding-top: 10px;
background-color: #85C1E9;
}
#menu-vertical ul li li a{
padding: 0px;
margin:0px;
}
#menu-vertical li{
width: 0,5em;
list-style-type: none;
}
#menu-vertical li a{
border-left: 1em solid #154360;
padding-left: 0,5em;
padding: 2px;
margin: 2px;
background-color: #A9CCE3;
display: inline-block;
color: #7B241C;
text-decoration: none;
}
#menu-vertical li a:hover{
background-color: #2980B9;
color: #A93226;
border-left-color: #C0392B;
}
#main{
font-size: 16px;
color: #1F618D;
padding: 30px;
background-color: #1A5276;
margin-right: 620px;
text-align: center;
}
#contenu{
margin-left: 15px;
margin-right: 625px;
height: 700px;
font-size: 16px;
text-align: justify;
background-color: #F8F9F9;
}
h4{
font-size: 16px;
color: #C0392B;
}
h1{
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 24px;
color: #154360;
padding: 16px;
font-weight: lighter;
text-align: center;
display: block;
margin: 16px;
margin-bottom: 30px;
}
#footer{
background-color: #85C1E9;
width: 915px;
padding: 10px;
padding-left: 30px;
margin-top: 50px;
margin-left: 0px;
font: Arial, sans-serif;
color: #1A5276;
font: 12px;
text-align: center;
}