Site web responsive

Comment rendre son site responsive?
Voici ma feuille CSS

@charset 'utf=8';

body
{
background: url(../IMG/FND.png);
max-width:100%;
max-height:100%;
}
#logo
{
position:relative;
right: -0.500em;
height: 5.000em;
width: 9.375em;
top: 3.125em;

}
#menu
{
height: 6.563em;
background: url(../IMG/ACC.png);
position: relative;
left: 16.188em;
width: 81%;
top: -1.875em;
display: block;
box-shadow: -0.313em 0.313em 0.625em 0.125em #555;
}
#menu-deroulant, #menu-deroulant ul
{
padding: 1.250em;
margin: -0.313em;
list-style: none;
}
#menu-deroulant
{
text-align: center;
}
#menu-deroulant li
{
display: inline-block;
}
#menu-deroulant ul li
{
display: inherit;
}
#menu-deroulant a
{
text-decoration: none;
display: inline;
color:#FFF;
}
#menu-deroulant ul
{
position: absolute;
left: -900em;
text-align: left;
z-index: 1000;
}
#menu-deroulant li:hover ul
{
left: auto;
line-height: 1.688em;
}
ul>li,a
{
list-style:none;
margin-right: 0.625em;
top: -0.625em;
text-align: center;
font-family:"Arial",Verdana,Sans-Serif;
font-size: 0.938em;
font-style: 1.250em;
right: 1.250em;
color: #FFF;
}
#menu-deroulant li>a.menu:hover
{
color: orange;
text-decoration: none;
}
#menu-deroulant li>a.menu:active
{
color:red;
text-decoration:none;
}
#menu-deroulant li>a:link
{
text-decoration:none;
color:grey;
}
ul.slide
{
display: table;
width: 81.250em;
-webkit-animation: slideAnim 45s ease 5s infinite;
-moz-animation: slideAnim 45s ease 5s infinite;
-ms-animation: slideAnim 45s ease 5s infinite;
-o-animation: slideAnim 45s ease 5s infinite;
animation: slideAnim 45s ease 5s infinite;
}

ul.slide> li
{
display: table-cell;
width: 18.750em;
white-space: nowrap;
overflow: hidden;
}

@keyframes slideAnim{
from,2%,to {margin-left: -9.375em;}
4%,6%{margin-left: -12.750em;}
8%,10%{margin-left: -20.125em;}
12%,14%{margin-left: -28.500em;}
16%,18%{margin-left: -36.875em;}
20%,22%{margin-left: -44.250em;}
24%,26%{margin-left: -52.625em;}
28%,30%{margin-left: -60.000em;}
32%,34%{margin-left: -68.375em;}
36%,38%{margin-left: -76.750em;}
40%,42%{margin-left: -84.125em;}
44%,46%{margin-left: -92.500em;}
48%,50%{margin-left: -100.875em;}
52%,54%{margin-left: -108.250em;}
56%,58%{margin-left: -116.625em;}
60%,62%{margin-left: -124.000em;}
64%,66%{margin-left: -132.375em;}
68%,70%{margin-left: -140.125em;}
72%,74%{margin-left: -148.500em;}
76%,78%{margin-left: -156.875em;}
80%,82%{margin-left: -164.250em;}
84%,86%{margin-left: -172.625em;}
88%,90%{margin-left: -180.000em;}
92%,94%{margin-left: -188.375em;}
96%,98%{margin-left: -196.750em;}
99.99%{margin-left: -204.375em;}
}
#slider
{
height: 12.500em;
position: relative;
top: 2.500em;
width: 78.125em;
right: -5.000em;
overflow: hidden;
display: inline;
border: none;
}
#shop
{
height: 32.500em;
width: 16.250em;
position: relative;
top: 6.250em;
right: -1.5em;
}
#container1
{
height: 1.875em;
width: 15.625em;
background-color: #7D0000;
border: 0.063em solid yellow;
border-radius: 0.188em;
box-shadow: 0.000em 0.000em 0.625em yellow;
@-webkit-animation-name: clignote;
@-webkit-animation-duration: 3s;
@-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes clignote
from{
0%{box-shadow: 0.000em 0.000em 0.625em yellow;}
50%{box-shadow: 0.000em 0.000em 0.000em yellow;}
100%{box-shadow: 0.000em 0.000em 0.625em yellow;}
}
div#container1>p
{
text-decoration: none;
color: white;
text-align: center;
padding-bottom: 0.625em;
font-family: "Arial",Verdana,Sans-Serif;
font-weight: bold;
text-shadow: 0.063em 0.063em 0.063em yellow;
position: relative;
top: -0.625em;
}
#container2
{
height: 31.250em;
width: 16.250em;
padding: 0.000em;
margin: auto;
position: relative;
top: 0.625em;
overflow: hidden;
background: url(../IMG/PD.png);
border: black 5px solid;
}
#screen
{
width: 50.000em;
height: 35.625em;
position: relative;
right: 4em;
bottom: 26.250em;
display: inline;
border: none;
overflow: scroll;
}
.blog
{
width: 12.500em;
height: 15.000em;
position: relative;
float: left;
display: inline;
overflow: hidden;
color: #000;
}
#text1
{
left: 74.063em;
bottom: 15.625em;
height: 1.875em;
width: 12.500em;
background-color: black;
border: 0.063em solid yellow;
border-radius: 0.188em;
box-shadow: 0.000em 0.000em 0.625em yellow;
@-webkit-animation-name: clignote;
@-webkit-animation-duration: 3s;
@-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes clignote
{
0%{box-shadow: 0.000em 0.000em 0.625em yellow;}
50%{box-shadow: 0.000em 0.000em 0.000em yellow;}
100%{box-shadow: 0.000em 0.000em 0.625em yellow;}
}
#text1>p
{
color: white;
text-align: center;
padding-bottom: 0.625em;
font-family: "Arial",Verdana,Sans-Serif;
font-weight: bold;
text-shadow: 0.063em 0.063em 0.063em yellow;
position: relative;
top: -0.625em;
}
#text2
{
position: relative;
right: -61.563em;
top: -12.500em;
}
#text2>p
{
text-justify: distribute;
border-top: #000;
}
div.blog>p
{
text-align: justify;
}
ul.adress, li.img
{
list-style: none;
margin-right: 0.625em;
font-family: "Arial",Verdana,Sans-Serif;
font-size: 0.875em;
position: relative;
right: -1.250em;
display: table;
line-height: 0.313em;
padding: 0.625em;
}
ul>p
{
text-align: left;
text-decoration: underline;
font-size: 1.250em;
color: black;
}
td>p
{
font-family: "Arial",Verdana,Sans-Serif;
line-height: 0.563em;
font-weight: bold;
text-size: 0.625em;
}
td>a>img
{
padding-bottom: 1.875em;
}
p.copyright
{
text-align: center;
font-family: "Arial",Verdana,Sans-Serif;
font-size: 0.875em;
font-weight: bold;
top: -5.625em;
left: -5.000em;
position: relative;
}
.link
{
list-style: none;
display: inline;
text-decoration: none;
}
.footer
{
line-height: 1.875em;
}
.footer>a:hover
{
list-style:none;
color:orange;
text-decoration: none;
}
.footer>a:active
{
list-style: none;
color: grey;
text-decoration: none;
}
ul>li.footer a
{
color: #FFF;
font-weight: bold;
display: block;
text-align: left;
list-style:none;
text-decoration: none;
}
li.local
{
text-align: left;
display: block;
line-height: 2.188em;
}
.list
{
text-align: left;
display: block;
line-height: 2.500em;
}
#partner>li
{
display: inline;
float: left;
position: relative;
right: -8.100em;
top: -0.938em;
padding-right: 10px;

}
#footer
{
height: 25em;
background: url(../IMG/PD.png);
bottom: -45.500em;
position: absolute;
width: 99%;
box-shadow: -0.125em 0.125em 0.125em 0.125em #555;
alignment-adjust: middle;
}
.prod
{
background-image: url(../IMG/FND.png);
color: #000;
}
h1
{
text-decoration: underline;
}

Merci

Famoud a écrit :
Comment rendre son site responsive?

Tout simplement en apprenant à le faire...
Si tu ne sais pas comment procéder, le web regorge de tutoriels te permettant de comprendre les principes et adapter ta feuille de style CSS aux besoins (ex. Les fondamentaux du Responsive Web Design).
Les intervenants sur le forum ne sont pas là pour faire le travail à ta place.
Lorsque tu auras adapté ton document et s'il subsiste des problèmes ponctuels, tu pourras alors revenir pour demander l'assistance nécessaire.

Bonjour ! Je ne vous demande pas de le faire à ma place. Peut-être ai je été mal compris. Juste savoir quels sont les éléments susceptibles d'être affectés par les média queries ou bien dois je réécrire deux feuilles de style CSS pour version mobile et pour version tablette?

Famoud a écrit :
Bonjour ! Je ne vous demande pas de le faire à ma place. Peut-être ai je été mal compris. Juste savoir quels sont les éléments susceptibles d'être affectés par les média queries ou bien dois je réécrire deux feuilles de style CSS pour version mobile et pour version tablette?

Nous donner le contenu actuel de ta feuille de style en nous demandant de la convertir en "responsive" n'a pas de sens...
Tout dépend en effet de la mise en page que tu voudras obtenir pour chacun des périphérique cible (portable, tablette, poste de travail, écran large, etc.). Si une voyante ou un extralucide passent sur le forum, peut-être pourront-ils te donner un coup de main, parce qu'en l'état rien ne nous indique l'ordre dans lequel doivent apparaître tes différents composants HTML suivant la résolution écran.
Quant à savoir s'il faut faire une feuille de style spécifique à chaque cible ou bien tout fusionner, là aussi que recherches-tu exactement ?.
La majorité des sites optent pour une feuille de style unique, histoire de n'avoir qu'une requête HTTP à effectuer. Mais ce n'est pas une règle gravée dans le marbre et chacun peut l'adopter ou non en fonction des contraintes / objectifs de son site web.
Modifié par sepecat (18 Feb 2018 - 10:38)

Bonjour,
Il y a beaucoup de tutos en ligne si tu ne sais pas rendre ton site responsive.