Media queries or not media queries ?

Salut a tous,

J'ai une question : je veux adapter mon site (http://yassine.cyberdesign.be) pour les différents type d'écran de PC(j'ai lu l'article d'alsacreation et d'autres forum et sites mais je ne comprends toujours pas),mais je bloque car je ne connais pas trop les media queries et comment voir si mon site s'affiche bien sur les différentes résolutions.
Donc j'aimerai vous demandez comment bien configurée les media queries et comment les testée ?

Bien à vous.

Bonsoir,

Pour la méthode de test de base c'est pas compliqué : il suffit de réduire la largeur de la fenêtre de votre navigateur pour en voir les effets sur un site responsive. Chrome a même un outil dédié dans son outil d'inspection.

Les tutoriels abondent sur le net...

Une vidéo pour la mise en bouche : Grafikart

Sur Alsacréations, de la lecture : Web mobile, introduction

Bonsoir ,

Merci pour votre réponse rapide,je viens de regarder la vidéo de grafikart mais je n'arrive pas a mettre en application ce qu'il explique.
Mon écran est un 1600x900 et j'aimerais adapté mon site a d'autre "format" d'écran(pour les 15" ,17", etc.) type desktop et laptop mais je ne sais pas comment m'y prendre car j'ai essayé de faire comme dans la vidéo mais rien ne fonctionne.

Voilà le code du media queries non fonctionnel

@media screen 
  and (min-device-width: 769px) 
  and (max-device-width: 1400px) 
  and (-webkit-min-device-pixel-ratio: 1) {    	#tete_menu {
	text-align: right;
	padding-top: 35px;
	    text-transform: uppercase;}
	#tete_menu a {
	
	font-weight: bolder;
	text-decoration:none;
	
	height:131px;
}
#description {
    background: #333;
    background: rgba(0, 0, 0, 0.3);
    max-height: 460px;
    height: 45%;
    width: 46%;
    position: absolute;
    top: 23%;
    z-index: 5;
    left: 230px;
}
}

@media screen and(max-width:500px)
{
	#tete {
	height:131px;
	width:100%;
	background:#000;
}
	
}

Modifié par Yaya7 (20 Dec 2015 - 18:24)

Je viens de résoudre le problème merci a toi.