Adapter mon responsive mobile aux autres formats

Bonjour à tous,

Je dois faire un site en responsive, j'en ai déja fais mais avant je faisait toujours en grand écran puis j'adapté sur les autres formats.

Mais la, je dois obligatoirement commencé mon site par le mobile puis l'adapter aux autres formats.

Mon site mobile ressemble à la maquette que j'ai reçu mais je n'arrive pas à l'adapter, dès que je met le format tablette par exemple, tout le style que j'ai mis sur mon format mobile disparaît (background, text-decoration: none,...)

Pouvez-vous m'aider s'il vous plaît ?

Merci d'avance

Mon code CSS :

@media screen and (max-width: 305px){
/* Responsive Mobile */
       /* BASE */
body {
	margin: 0 0;
}

#content{
    width: 100%;
    display: block;
}

/* Fin de la base */
/* Partie Entête */

header {
	width: 100%;
	height: 50em;
	background-color: #ccffef;
	display: block;
	border-bottom: solid 2px #666666;
}

#icones {
	margin-bottom: 20px;
	display: block;
}

#icones img{
	margin-left: 5px;
	margin-top : 15px;
}

/* Fin partie entête */
   /* Partie menu */

nav {
	border-top : solid 2px #666666;
	min-height: 25em;
	width: 100%;
	background-color : #9999ff;
	display: block;
}

nav img {
	width: 100%;
	display: block;
}

#menu {
	display: block;
	min-height: 22em;
	width: 100%;
	position: relative;
	border-bottom: solid 2px #666666;
}

#menu ul li {
	margin-top: 4%;
	margin-left: 10%;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 119%;
}
#menu .trait {
	border-top : solid 2px #ebebe0;
}

#menu li a{
	display:block;
	color: #404040;
	text-decoration:none;
}

#menu li a:hover {
	color: #de3b3b;
}

#menu ul { 
padding:0;
list-style-type:none;
}

#menu ul ul {
	display: none;
}

#menu li:hover ul.sous-menu {
	display:block;
}

/* Fin de la partie menu */
  /* Partie diaporama */

#galerie {
	margin-top: 32px;
	height: 10em;
	display: block;
	position: relative;
}

#galerie img {
	width: 100%;
}

/*#scroll img {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
			} */


/* Fin de la partie diaporama */
    /* Partie principale */

#principale {
	width: 100%;
	min-height: 140em;
	background-color: white;
}

article {
	width: 100%;
	margin-top: 10px;
}

article p {
	font-size: 80%;
	line-height: 162%;
	font-family: 'Source Sans Pro', sans-serif;
	color: #404040;
}

#feu {
	margin-top: 12%;
	width: 100%;
	background-color: #9999ff;
	height: 10em; 
	display: block;
}

	
.image {
	width: 36%;
	float: left;
	height: 10em;
}

#feu img {
	width: 100%;
    margin-top: 5%;
    margin-left: 5%;
}

article a{
	text-decoration: none;
	color: red;
}

.texte {
	width: 64%;
	float: left;
	height: 10em;
}

.texte1 {
	width: 70%;
	float: left;
	height: 10em;
}

.image1 {
	width: 30%;
	float: left;
	height: 10em;
}

.texte1 h2 {
	margin-left: 5%;
	font-size: 120%;
	color: white;
	font-family: 'Source Sans Pro', sans-serif;
}

.texte h1 {
	font-size: 120%;
	color: white;
	font-family: 'Source Sans Pro', sans-serif;
}

.texte h2 {
	margin-left: 5%;
	font-size: 120%;
	color: white;
	font-family: 'Source Sans Pro', sans-serif;
}


#tipi {
	margin-top: 12%;
	width: 100%;
	background-color: #9999ff;
	height: 9em; 
	display: block;
}


#tipi img {
	width: 100%;
    margin-left: 5%;
    margin-top: 9%;
}

#patte {
	margin-top: 12%;
	width: 100%;
	background-color: #9999ff;
	height: 9em; 
	display: block;
}


#patte img {
	width: 100%;
    margin-top: 16%;
    margin-left: 5%;
}

#destination {
	width: 100%;
	display: block;
	margin-bottom: 60%;
}

#destination h2 {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 170%;
	color: #404040;
}

#destination button {
	margin-top: 5%;
}

#drapeau {
	width: 100%;
	height: 17em;	
}

#about {
	width: 100%;
	display: block;
	height: 99em;
	background-color: #ccffef;
	border-top : solid 2px #737373;
	border-bottom : solid 2px #737373;
}

#about h2 {
	margin-top: 2em;
	font-size: 160%;
	margin-bottom: 1em;
	color: #404040;
	font-family: 'Raleway', sans-serif;
}

#about .trait {
border-top: solid 2px #cccccc;
padding-top: 2em;
}

.trait1 {
border-bottom: solid 2px #cccccc;
padding-bottom: 1em; 
}

#about img {
	float: left;
	margin-right: 1em;
}

#about .padding {
	margin-top: 0;
}

#about button {
	width: 50%;
	height: 2.3em;
	background-color: #5a9b4d;
	border-radius: 8%;
	font-size: 140%;
	color: white;
	border: solid 2px #3d3d29;
	font-family: 'Source Sans Pro', sans-serif;
}

/* Fin de la partie principale */
	   /* Partie footer */

footer {
	display: block;
	width: 100%;
	height: 15em;
	background-color: #9999ff;
	margin: 0;
}

#footer {
	display: block;
	padding-top: 3em;
	width: 100%;
	margin: 0 0;
}

#footer ul {
	margin-left: 4%;
	padding: 0 0;
}

#footer a {
	text-decoration: none;
	font-size: 95%;
	margin: 0 0;
	color: black;
	font-family: 'Source Sans Pro', sans-serif;
}

#footer ul li {
	margin: 0 0;
	list-style: none;
	display: inline-block;
	padding-right: 2em;
}

#footer p {
	padding-top: 2em;
	margin-left: 4%;
	font-size: 80%;
	color: #706447;
}
}

/* Fin responsive Mobile */
/* Responsive tablette */

Modifié par DBgui (24 May 2017 - 15:52)

Bonjour,
c'est normal que ton design "disparaisse" sur les écrans dépassant les max-width: 305px. C'est dû au fait que tu demande explicitement d'appliquer les styles pour cette valeur maximale. Du coup dès que la taille d'écran dépasse cette valeur, ton navigateur s’exécute et applique... rien de ce qui est définit en dessous des 305px (cette phrase est un peu bizarre mais c'est concrètement ce qu'il fait).

Premièrement, je te conseille ne fonctionner avec min-width plutôt que max-width, vu que tu es dans une perspective "mobile first", tu dois fonctionner avec des taille mini et non plus maxi comme c'était le cas avant.
Deuxièmement, tu n'es pas forcé de tout englober dans des media queries : certains styles seront globaux, et la taille de l'écran ne doit pas les impacter. Pour ces derniers, définis les en premier lieu. Tu auras une base de travail saine à partir de laquelle tu pourras monter progressivement en taille d'écran.

Je te conseille de jeter un oeil au code des différents frameworks mobile first comme foundation en knacss afin de t'inspirer
Modifié par neovea (24 May 2017 - 17:39)