Media Query, sur-fait ?

Bonjour à tous!

Déjà merci à l'équipe et à la communauté pour le site, j'ai appris beaucoup de chose grâce à lui.
J'ai une question qui me trotte dans la tête depuis quelques jours :
Les médias query ne sont-t-ils pas utilisé n'importe comment ? On peux t-on pas faire leur travail sans ?
(Mes niveaux de compétences sont beaucoup plus avancées en php, poo, sql, qu'en web-designer )
Mais en essayant de codé un système de grille pour mon framework perso, je trouve que le résultat peux déjà très extensible...

<style>
			._
			{
				margin:auto;
				padding:0px;
				word-wrap:break-word;
				width:100%;
			}
			
			._ ._
			{
				display:inline-block;
				vertical-align: top;
				border-radius:10px;
			}

</style>

<div class="_">
	<div class="_" style="width:65%;background-color:blue;min-width:300px;">Ma première colonne</div><!--
	--><div class="_" style="width:35%;background-color:red;">Ma deuxième colonne</div>
</div>
<div class="_">
	<div class="_" style="width:33%;background-color:blue;">Ma première colonne</div><!--
	--><div class="_" style="width:33%;background-color:red;min-width:400px;">Ma deuxième colonne<br />Avec du texte sur deux lignes</div><!--
	--><div class="_" style="width:33%;background-color:green;">Ma troisième colonne</div>
</div>
<div class="_">
	<div class="_" style="width:25%;background-color:green;min-width:300px;">Ma première colonne</div><!--
	--><div class="_" style="width:25%;background-color:orange;min-width:300px;">Ma deuxième colonne</div><!--
	--><div class="_" style="width:25%;background-color:pink;min-width:300px;">Ma troisième colonne</div><!--
	--><div class="_" style="width:25%;background-color:blue;min-width:300px;">Ma quatrième colonne</div>
</div>

/!\ Je ne dis pas que les médias query sont inutiles, mais qu'on n'y pas obligé de les utiliser pour avoir un résultat correct
/!\ Je suis pas là pour lancer un troll, mais un débat, les autres peuvent se toucher la nouille ailleurs

Quel est votre utilisation de cette technologie ? Qu'en pensez-vous ?

Hello,

les media-queries te permettent d'aller plus loin dans ton idée.

Dans ton cas, le design fluide connait des limites pour les petits écrans : des colonnes de 33% sur un écran de 320px ça ne fait pas lourd. Tu essayes de limiter cela avec des min-width, mais vu le nombre, sans-cesse croissant, de devices, tu ne peux pas anticiper la largeur idéale.

Ainsi avec des media-queries tu peux adapter la position de tes éléments pour tel ou tel type d'écran. Le cas le plus courant est de transformer ta grille en une suite de blocs de 100% de large.

Je ne suis pas très clair... le livre d'Ethan Marcotte est bien plus explicite

Par contre, je te rejoins sur le fait que les media-queries, et de façon plus générale, le responsive sont surexploités et tout n'est pas bon à prendre. Le responsive ça se réfléchit, ça n'est pas une simple adaptation de grille (cf. Bootstrap & co - qui ne sont que des bases à mes yeux). Au delà d'un affichage propre & lisible, le responsive doit proposer une expérience utilisateur non pas adaptée mais différente. Sur ce point, les prouesses techniques ne suffisent pas

Ju
Modifié par JulienFouquet (07 Mar 2013 - 14:09)

Merci de ta réponse, c'est bien ce que je pensais
(c'est quand même bien galère le css, enfin 50% viennent de IE6 [ /troll] )