Largeur max vs largeur min
La plupart des didacticiels que je lis sur l'utilisation des requêtes multimédias montrent l'utilisation de min-width, mais je vois rarement des gens utiliser max-width.
Est-ce une sorte de tendance ou de motif de conception, pourquoi les gens utilisent min-width plus de max-width?
Par exemple, je conçois un site à partir du mobile, en travaillant jusqu'au bureau. J'utilise Foundation 4, mais j'utilise des requêtes multimédias pour supprimer divers éléments sur la page et repositionner l'ordre source.
Une chose à laquelle je suis confronté est une navigation personnalisée pour tout appareil dont la largeur est de 360 pixels ou moins. Je veux qu'ils aient une navigation verticale, plutôt qu'une horizontale en ligne. Mon idée était donc d'utiliser max-width pour cibler ces appareils.
Dois-je utiliser min-width à la place si je conçois d'abord le mobile? C'est à dire. tous les styles par défaut sont pour mobile, et donc en utilisant min-width pour améliorer progressivement la mise en page?
Cela dépend vraiment du fonctionnement de votre feuille de style. Par exemple:
@media screen and (min-width:100px) {
body { font-weight:bold; }
}
@media screen and (min-width:200px) {
body { color:#555; }
}
Les deux requêtes de média ci-dessus rendraient la police body en gras si l'écran est supérieur ou égal à 100 pixels, mais aussi rend la couleur #555 si elle est supérieure ou égale à 200px;
Un autre exemple:
@media screen and (max-width:100px) {
body { font-weight:bold; }
}
@media screen and (max-width:200px) {
body { color:#555; }
}
Contrairement au premier exemple, cela rend la police body en gras et la couleur #555 uniquement si la largeur de l'écran est comprise entre 0 et 100 px. Si c'est entre 0px et 200px, ce sera la couleur #555.
La beauté des requêtes média est que vous pouvez combiner ces déclarations:
@media screen and (min-width:100px) and (max-width:200px) {
body { font-weight:bold; color:#555; }
}
Dans cet exemple, vous ne ciblez que des appareils d'une largeur comprise entre 100 px et 200 px - rien de plus, rien de moins.
En bref, si vous voulez que vos styles fuite hors des requêtes multimédias, vous utilisiez soit min-widthomax-width, mais si vous voulez affecter un critère très spécifique, vous pouvez simplement combiner les deux.
Réponse en 2 parties
Partie 1: Pour répondre "pourquoi les gens utilisent-min-largeur sur max-largeur?":
Cela a à voir avec le flux de conception. En règle générale, avec des motifs de largeur minimale, vous concevez d'abord sur mobile. Avec des motifs de largeur maximale, vous concevez le bureau en premier.
En allant d'abord sur mobile avec une largeur minimale, le style par défaut est le style mobile. Les requêtes suivantes ciblent ensuite des écrans progressivement plus grands.
body {
/* default styles here,
targets mobile first */
}
@media screen and (min-width:480px) {
/* style changes when the screen gets larger */
}
@media screen and (min-width:800px) {
/* And even larger */
}
Inversement, l'utilisation de max-width est d'abord sur le bureau, puis ajoute des requêtes pour rendre les styles adaptés aux mobiles
body {
/* default styles here,
targets desktops first */
}
@media screen and (max-width:800px) {
/* style changes when the screen gets smaller */
}
@media screen and (max-width:480px) {
/* And even smaller */
}
Partie 2: Pour votre navigation personnalisée particulière pour tout appareil dont la largeur est de 360 pixels ou moins:
Vous pouvez l'inclure en tant que requête de largeur maximale distincte, SI c'est la seule exception à la règle. OR utilisez ce style comme référence, puis changez-le pour des écrans plus larges.
Si vous faites une exception (qui ne suit pas vraiment les méthodes de conception mobile d'abord), ce serait quelque chose comme:
body {
/* default styles here,
targets mobile first
ALSO will cover 361 - 479 width */
}
@media screen and (max-width:360px) {
/* style ONLY for screens with 360px or less width */
}
@media screen and (min-width:480px) {
/* style changes when the screen gets larger */
}
etc...
En bref, min-width est une 1ère approche mobile, max-width est une 1ère approche de bureau.
La largeur minimale est la largeur minimale à laquelle un style commencera à être appliqué. (Doit être commandé du plus petit au plus grand pour fonctionner correctement, les styles réguliers en premier). Autrement dit: si la largeur de l'appareil est supérieure ou égale à ..., appliquez alors certains styles spécifiques. Avec la largeur minimale, les styles COMMENCENT et continuent indéfiniment tant que la largeur minimale est respectée et qu'aucune largeur maximale n'est spécifiée.
Max-width est la largeur maximale à laquelle un style continuera d'être appliqué. Après cela, le style cessera d'être appliqué. (Doit être commandé du plus grand au plus petit pour fonctionner correctement, les styles réguliers en premier). Autrement dit: si la largeur de l'appareil est inférieure ou égale à ..., appliquez des styles spécifiques. Les styles s'arrêtent dès qu'une largeur supérieure à la largeur maximale est atteinte.
Enfin, cela dépend de la façon dont vous souhaitez l'implémenter. Il n'y a pas de solution UNIQUE, comme certains le prétendent. À mon avis, la largeur minimale fonctionne très bien en partant de zéro, mais la largeur maximale a souvent plus de sens pour moi lors de la rénovation d'un site Web existant.
Parce que vous développez un site Web commençant par une conception mobile et augmentant la complexité de la résolution, je vous conseille de choisir min-width car cela suit le même schéma de travail.
Techniquement, min-width est "mobile d'abord" dans le sens où vous commencez généralement à développer pour mobile et ajoutez plus de complexité à mesure que la résolution augmente.
Cependant, le terme a gagné en popularité davantage par rapport à sa signification alternative, ce qui implique généralement davantage une concentration sur les efforts mobiles et la priorisation (principalement alimentée par des clients ou des gestionnaires qui ne comprennent pas l'inférence technique). C'est probablement pourquoi vous finissez par voir beaucoup de min-width exemples en ligne (blogueurs branchés écrivant sur des sujets tendances).
Lorsque je travaille avec des conceptions de bureau complexes, je trouve personnellement plus facile d'écrire max-width demande pour ainsi dire "simplifier l'équation". Mais en utilisant max-width les requêtes ne vous empêchent pas de vous concentrer sur le mobile et peuvent tout de même faire partie intégrante d'une stratégie "mobile first".
Dans les deux cas, la chose la plus importante est la cohérence. Utilisez-en un et respectez-le pour ce projet. Un projet peut devenir très déroutant s'il utilise les deux.
Pour finir, utiliser moins de requêtes lorsque cela est possible est idéal. Cela peut être réalisé grâce à une bonne conception réactive.
J'avais d'abord un site Web qui ne répond pas, conçu pour les ordinateurs de bureau. Puis une réactivité accrue en ajoutant des requêtes multimédias de largeur maximale.
Mon site dispose désormais de dispositions pour les périphériques de 320 pixels, 480 pixels, 768 pixels, 960 pixels et 1024 pixels, etc., et j'ai donc ajouté des requêtes multimédias qui ressemblent à 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 le Chrome Outils de développeur "Mode appareil" a un outil de requêtes multimédia qui est vraiment, vraiment utile pour moi. Il me permet de cliquer pour afficher le site Web à chaque niveau de requête multimédia que Chrome trouve sur ma page. Cela m'aide beaucoup lors de la conception des mises en page réactives.
L'outil de requêtes multimédias utilise les chiffres qu'il trouve dans les requêtes multimédias, à savoir 479, 767, 959, 1023, etc. devez cliquer sur la requête de média de niveau max-width 767px, ce qui pour moi est assez peu intuitif.
Cela m'a incité à repenser mon CSS actuel pour ordinateur de bureau, et je vais réécrire mon CSS en utilisant une approche mobile d'abord.
Je pense que le CSS pour mobile en utilisant min-width sera beaucoup plus lisible, car vous verrez une requête multimédia pour min-width: 480px et sachez que ce sera le CSS pour un périphérique de 480 pixels.
La majorité des sites sur lesquels j'ai travaillé sont d'abord conçus pour le bureau et dans ces cas, en utilisant max-width les requêtes ont du sens. Généralement, si vous démarrez un petit écran, utilisez d'abord min-width, puis développez les requêtes multimédias 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
Peut-être jetez un œil à l'utilisation de min-device-width pour le problème spécifique que vous rencontrez avec la navigation