Redimensionner ma page web en fonction des écrans..

Résolu
MisterGameFR Messages postés 165 Date d'inscription   Statut Membre Dernière intervention   -  
MisterGameFR Messages postés 165 Date d'inscription   Statut Membre Dernière intervention   -
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

A voir également:

1 réponse

Réponse 1 / 1
Rama
 
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.
0
MisterGameFR Messages postés 165 Date d'inscription   Statut Membre Dernière intervention  
 
J'ai déjà vue les site que tu me propose dans le moteur de recherche malheureusement je n'ai pas réussi à trouver une réponse ..

J'arrive à redimensionner, mais le problème c'est que le body se redimensionnée mais pas les contener qui sont à l’intérieur ..
0
Rama
 
Tant mieux si vous avez tout compris alors... vous n'avez plus besoin de réponse à votre question.

Normal que tout se redimensionne pas. On parle bien de 2 CSS (ou plus) selon les résolutions.

Hoprs dans votre exemple vous n'avez que le css pour header et nav, seuls ceux ci seront concernné, rien à voir avec le body.

Soit vous vous dépatouillez pour que header et nav soient les seuls éléments qui aient plusieurs CSS(en général on pense à différentes mise en page aussi, ça sert à rien de reproduire à l'identique une page pour un écran de bureau sur un écran qui tient dans la main) soit vous faites le nombre de CSS distincts selon le nombre de résolutions différentes que vous prévoyez...

C'était ça qu'il fallait que vous lisiez dans la recherche Google, les explications pas faire du copier coller, CQFD: que vous compreniez ce que sont les media queries.
0
MisterGameFR Messages postés 165 Date d'inscription   Statut Membre Dernière intervention  
 
J'ai m'y quelque jour pour comprendre mais c'est bon !

C'est logique quand on y arrive, mais sur le moment je comprennais pas vraiment l'utilité du Display: block; et inline-block ;)

Merci
0