Largeur maximale et largeur minimale

Question

La plupart des tutoriels que je lis sur l'utilisation des Media Queries démontrent l'utilisation de min-width mais je vois rarement des gens utiliser max-width .

S'agit-il d'une tendance ou d'un modèle de conception, pour lequel les gens utilisent min-width en max-width ?

Par exemple, je conçois un site à partir d'un téléphone portable, puis d'un ordinateur de bureau. J'utilise Foundation 4, mais je me sers de media queries pour supprimer divers éléments de la page et repositionner l'ordre des sources.

Une chose à laquelle je suis confronté est une navigation personnalisée pour tout appareil dont la largeur est inférieure ou égale à 360px. Je veux qu'ils aient une navigation verticale, plutôt qu'une navigation horizontale en ligne. Mon idée était donc d'utiliser max-width pour cibler ces dispositifs.

Dois-je utiliser min-width au lieu de cela, si je conçois le mobile d'abord ? C'est à dire que tous les styles par défaut sont pour le mobile, et donc l'utilisation de min-width pour améliorer progressivement la mise en page ?

Answer 1

J'ai d'abord eu un site web peu réactif, conçu pour les ordinateurs de bureau. J'ai ensuite ajouté la réactivité en ajoutant des requêtes média de largeur maximale.

Mon site a maintenant des mises en page pour les appareils de 320px, 480px, 768px, 960px, et 1024px etc. et j'ai donc ajouté des requêtes média qui ressemblent à ceci max-width: 479px , max-width: 767px , max-width: 959px etc. Cela fonctionne bien - le site se comporte comme il se doit.

Cependant, j'ai récemment découvert que les outils de développement Chrome "Device Mode" disposent d'un outil Media Queries qui m'est vraiment, vraiment utile. Il me permet de cliquer pour afficher le site web à chaque niveau de requête média que Chrome trouve sur ma page. C'est une aide précieuse lorsque je conçois des mises en page réactives.

L'outil Media Queries utilise les nombres qu'il trouve dans les media queries, c'est-à-dire 479, 767, 959, 1023, etc. Mais cela signifie que, par exemple, si je veux voir à quoi ressemble ma mise en page pour un appareil de 480 px de large, je dois cliquer sur la requête média de 767 px de largeur maximale, ce qui n'est pas très intuitif.

Cela m'a amené à repenser mon CSS actuel, axé sur les ordinateurs de bureau, et je vais réécrire mon CSS en utilisant une approche axée sur le mobile.

Je pense que le CSS "mobile-first" utilisant min-width sera beaucoup plus lisible, car vous verrez une requête de média pour min-width: 480px et savoir qu'il s'agira du CSS pour un appareil de 480px de large.

Answer 2

La majorité des sites sur lesquels j'ai travaillé sont d'abord conçus pour l'ordinateur de bureau et, dans ces cas, l'utilisation de max-width Les requêtes sont logiques. En général, si vous commencez par un petit écran, utilisez d'abord min-width puis de les compléter par des requêtes médiatiques ciblant des résolutions plus importantes.

Vous pouvez bien sûr mélanger les requêtes min et max pour obtenir des résolutions spécifiques.

Vous pouvez peut-être envisager d'utiliser min-device-width pour le problème spécifique que vous rencontrez avec la navigation