Responsive design et media queries

Bonjour,

Est-il mieux de faire une feuille de style par types d'écrans : grands (Desktop/iPad) & petits (iPhone), et donc partir de zéro pour chaque CSS ? Ou essayer de venir apposer de petites corrections dans la même CSS ?

En fait, je dois faire évoluer le design d'un site vers une version mobile (iPhone, etc.). Ce site présente un menu assez compliqué que je dois complètement présenter autrement. Arriver à ce point dans ma CSS, je me pose des questions sur les bonnes pratiques car c'est la première fois que j'ai l'occasion de faire du responsive design. Cela devient le casse-tête d'annuler ce qui est défini pour du desktop et venir remettre en forme pour un iPhone.

Comment faites-vous de votre côté ?

Merci pour vos avis

Salut,

Dans une seule et même feuille de style, tu peux indiquer des règles CSS applicables à différents médias, et ce grâce à la règle @media. L'avantage, outre le fait de n'apporter que les modifications nécessaires, est que tu réduis le nombre de requêtes HTTP pour l'appel des feuilles de style, ce qui est bon pour les performances (qui sont un point à ne pas négliger dans le Web mobile).

Merci pour ton avis Victor.

Est-il possible dans une même CSS de faire ceci et s'assurer d'une comptabilité avec tous les navigateurs ?

@media screen and (min-width: 768px) {
    // Déclarations pour le desktop et l'iPad
}

@media only screen and (max-width: 320px) {
    // Déclarations pour l'iPhone
}

Ce qui permettrait de ne pas devoir annuler tout ce qui a été fait en version desktop et donc repartir de zéro pour l'iPhone. Je pense toujours à mon menu qui change du tout au tout

Hello,

julienstrulens a écrit :
Est-il possible dans une même CSS de faire ceci et s'assurer d'une comptabilité avec tous les navigateurs ?

Le problème, c'est que les navigateurs qui ne supportent pas les media queries (par exemple IE6 à 8) n'auront aucun style CSS…

Je crois qu'il y a des scripts permettant d'émuler les media queries sur les vieux navigateurs, à charger avec un bon vieux commentaire conditionnel mais je ne sais pas ce que ça vaut et en cas d'absence de Js, on se retrouve avec la feuille de styles du navigateur…

Salut,

audrasjb a écrit :
Hello,

Le problème, c'est que les navigateurs qui ne supportent pas les media queries (par exemple IE6 à 8) n'auront aucun style CSS…

Je crois qu'il y a des scripts permettant d'émuler les media queries sur les vieux navigateurs, à charger avec un bon vieux commentaire conditionnel mais je ne sais pas ce que ça vaut et en cas d'absence de Js, on se retrouve avec la feuille de styles du navigateur…

En effet, je viens d'avoir l'occasion de tester et vérifier sur la relique 7 et 8 de chez Microsoft. Je suis arrivé à mes fins en annulant mes déclarations avec plein de nouvelles. Un peu embêtant car cela revient à penser à l'envers

Salut,

Pour faire passer la pilule des media queries aux versions d'IE antérieures à la 9, il y a, effectivement, des scripts comme Respond.js (cf. fin de l'article sur les media queries).