Redimensionner ma page web en fonction des écrans.. Résolu/Fermé

Question

Bonjour, 

J'aimerais redimensionner ma page web en fonction des écrans pour qu'il s'adapte au tablette, au écran d'ordinateur qui sont plus ou moins grand et les téléphones. 
(Pour les téléphones une application sera créer donc pas obligé ) 

J'ai recherché sur internet et je suis tombé sur ce type de code

@media screen and (min-width: **px) and (max-width: **px){

}

Mais je n'ai pas réussi à l'utiliser (Je suis encore un débutant et je m'y connais pas réellement .. ) 

Voici mon code CSS Complet :

body,html{
    margin: 0;
    height: 100%;
    padding: 0;   
    
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////            Header              ///////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.banner{
    position: relative;
    display: block;
    background-color: #34495e;
    height: 100px;
    width: 100%;
    
}

.titre{ 
    display: inline-block;
    line-height: 100px;
    margin: 0; 
    padding: 0 20px 0 150px ; 
    font-family: Dancing Script OT;
    font-size: 50px;
    color: #F1C40F; 
    
}

.mem{
    float: right;
    display: inline-block; 
    margin: 22px 35px 0 0; 
    background-color: transparent; 
    width: 35%; 
    height: auto; 
    padding: 5px; 
}

form.connect1{
    display: inline-block;
    margin: 0 auto;
    padding: 0;

}

.connect2{
    border-radius: 3px;
    margin: 0 5px 0 0;
    padding: 10px;
    width: 192px;

}

.check1{
    display: inline-block;
    width: 25px; 
    height: 10px;
}

.sesou{
    font-family: roboto Slab ; 
    font-size: 12px;
    color: lightblue;
}

.logo_1{
    padding: 0 0 0 200px; 
    float: left; 
    display: inline-block;
    width: 50;  
}

.contener{
    margin: 0 auto;
    padding: 0; 
    height: 800px;
    width: 100%;
    overflow: hidden;
    background-color: transparent;

}

.container{
    float: left;
    display: inline-block;
    margin: 0;
    height: 100%;
    width: 50%;
    background-color: transparent;

}

.carre{
    float: right; 
    vertical-align: middle; 
    display: inline-block;
    margin: 80px;
    background-color: #34495e; 
    height: 550px;
    width: 55%;
    padding: 0px;
    
}

form.form{
    margin: 0 0 5px 15px;
    padding: 70px 0 0 8%;

}

form input{
    font-family: Roboto Slab;
    font-size: 16px;
    border: 2px;
    margin: 3px 10px 5px 0;
    width: 180px;

}

.nom{
    border-radius: 3px;
    padding: 10px;
    width: 192px;

}

.email{
    border-radius: 3px;
    padding: 10px;
    width: 398px;
}

.date{
    border-radius: 3px;
    padding: 10px;
    width: 192px;
}

.sub{
    outline: none;
    border-radius: 3px;
    border: solid 2px #0da574;
    padding: 10px;
    background-color: transparent;
    font-family: Roboto Slab;
    font-size: 16px;
    color: #0da574;
    transition: all 0.2s ease-in; 
    
}

::-webkit-input-placeholder { /* WebKit browsers */ color: #34495e;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #34495e;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #34495e;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #34495e;
}

/* QUAND ON SURVOLE LE FORMULAIRE */

form input:focus{
    transition: all 0.6s ease;
    background-color: #D8E9F0;
}

.sub:hover{
    transition: all 0.6s ease;
    padding: 10px;
    background-color: #0da574; 
    color: azure;
    
}

/* ///////////////////////////////////////////////
/////////////////////////////////////////////////  e*/

.check{
    margin: 0;
    padding: 0;
    width:25px;
}

.text_j{
    font-family: Roboto Slab;
    font-size: 12px;
    color: #ecf0f1;

}

.lien{
    color: lightblue;
    transition: all 0.2s ease-in;
}

.lien:hover{
    color: #F1C40F;
    transition: all 0.6s ease; 
}

.cop{
    font-family: Roboto Slab;
    font-size: 10px;
    text-align: center;
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 375px) and (max-width: 600px){
    
    	header{
		height: 50px;
	}

nav{
		font-size: 12px;
		padding: 10px
	}
	nav:hover a{
		padding: 5px 10px 10px 10px;
	}

}

Si quelqu'un à une solution, je vous écoute :) 

Merci d'avance 

Configuration: Windows / Chrome 49.0.2623.110

Rama · Answer

Salut,
bah une recherche sur la toile ça peut beaucoup et c'est détaillé autant qu'on veux:

https://www.google.fr/search?q=css+media+queries

Il faudra donc faire une mise en page différente par média différents, donc plusieurs CSS.

Cherchez aussi du côté des extensions développeurs pour le navigateur qui permettent d'avoir l'aperçu de la page sur le média mobile.

Redimensionner ma page web en fonction des écrans..

1 réponse

Discussions similaires