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

Réponse en 2 parties

Partie 1 : Répondre à la question "Pourquoi les gens utilisent-ils la largeur minimale plutôt que la largeur maximale ?

Il s'agit d'une question de flux de conception. En règle générale, avec les modèles de largeur minimale, on conçoit d'abord pour les mobiles. Avec les modèles de largeur maximale, on conçoit d'abord pour les ordinateurs de bureau.

Si l'on adopte le style mobile-first avec min-width, le style par défaut est le style mobile. Les requêtes suivantes visent des écrans de plus en 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 */
    }

À l'inverse, l'utilisation de la largeur maximale (max-width) est axée sur l'ordinateur de bureau, puis ajoute des requêtes pour rendre les styles adaptés à la mobilité.

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 inférieure ou égale à 360px :

Vous pourriez l'inclure dans une requête distincte concernant la largeur maximale, SI c'est la seule exception à la règle. OU utiliser ce style comme référence, puis le modifier pour les écrans plus larges.

Si vous faites une exception (qui ne suit pas vraiment les méthodes de conception mobile-first), ce sera 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...

Answer 2

Cela dépend vraiment de la manière dont fonctionne 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 ci-dessus rendraient la page body police en gras si l'écran est supérieur ou égal à 100px, mais également faire la couleur #555 s'il est supérieur ou égal à 200px ;

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, le body police en gras et couleur #555 uniquement si la largeur de l'écran est comprise entre 0 et 100px. Si elle est comprise entre 0px et 200px, elle sera de couleur #555 .

L'intérêt des requêtes médiatiques réside dans le fait 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 les appareils dont la largeur est comprise entre 100 et 200 px - rien de plus, rien de moins.

En bref, si vous voulez que vos styles fuite en dehors des requêtes médiatiques, vous utiliserez soit min-width o max-width mais si vous souhaitez affecter un critère très spécifique, vous pouvez combiner les deux.

Answer 3

En bref, la largeur minimale est une approche mobile, la largeur maximale est une approche de bureau.

Min-width est la largeur minimale à laquelle un style commencera à être appliqué. (Pour fonctionner correctement, les styles doivent être classés du plus petit au plus grand, en commençant par les styles normaux). En d'autres termes : Si la largeur de l'appareil est supérieure ou égale à..., il faut appliquer des styles spécifiques. Avec la largeur minimale, les styles COMMENCENT et continuent pour toujours 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é. Au-delà, le style cesse d'être appliqué. (Pour fonctionner correctement, les styles réguliers doivent être classés du plus grand au plus petit). En d'autres termes : Si la largeur de l'appareil est inférieure ou égale à..., appliquer des styles spécifiques. Les styles cessent d'être appliqués dès que la largeur est supérieure à la largeur maximale.

Enfin, tout dépend de la manière dont vous souhaitez mettre en œuvre le système. Il n'y a pas de solution unique et correcte comme certains le prétendent. À mon avis, la largeur minimale fonctionne très bien lorsque l'on part de zéro, mais la largeur maximale est souvent plus judicieuse lorsque l'on adapte un site web existant.

Answer 4

Étant donné que vous développez un site web en commençant par une conception mobile et en augmentant la complexité avec la résolution, je conseillerais d'opter pour min-width parce qu'il suit le même schéma de travail.

Techniquement, min-width est "mobile first" dans le sens où vous commencez généralement à développer pour le mobile et ajoutez de la complexité au fur et à mesure que la résolution augmente.

Cependant, le terme a gagné en popularité surtout par rapport à son sens alternatif qui en est généralement venu à impliquer davantage une augmentation de l'attention portée aux efforts mobiles et à la priorisation (principalement alimentée par les clients ou la direction qui ne comprennent pas l'inférence technique). C'est probablement la raison pour laquelle vous voyez beaucoup de min-width exemples en ligne (blogueurs branchés écrivant sur des sujets branchés).

Lorsque je travaille avec des conceptions de bureau complexes, je trouve personnellement qu'il est plus facile d'écrire max-width pour "simplifier l'équation" en quelque sorte. Mais l'utilisation de max-width Les requêtes ne vous empêchent pas de vous concentrer sur le mobile et peuvent tout à fait faire partie d'une stratégie "mobile first".

Dans les deux cas, le plus important est la cohérence. Utilisez-en un et tenez-vous-en à ce projet. Un projet peut devenir très confus s'il utilise les deux.

Enfin, l'idéal est d'utiliser moins de requêtes lorsque c'est possible. Cela peut être réalisé grâce à une bonne conception réactive (responsive design).

Answer 5

Que sont les approches "Mobile-first" et "Desktop-first" ?

A mobile-first signifie que les styles sont d'abord appliqués aux appareils mobiles. Des styles avancés et d'autres dérogations pour les écrans plus grands sont ensuite ajoutés à la feuille de style par le biais de requêtes multimédias.

Cette approche utilise

largeur minimale

les questions relatives aux médias.

Voici un exemple rapide :

// This applies from 0px to 600px
body {
  background: red;
}

// This applies from 600px onwards
@media (min-width: 600px) {
  body {
    background: green;
  }
}

Dans l'exemple ci-dessus, aura un arrière-plan rouge en dessous de 600px. L'arrière-plan devient vert à partir de 600 px.

En revanche, un le bureau d'abord signifie que les styles sont d'abord appliqués aux appareils de bureau. Les styles avancés et les dérogations pour les écrans plus petits sont ensuite ajoutés à la feuille de style par l'intermédiaire des requêtes de média. Cette approche utilise les requêtes de média >max-width des requêtes de média.

Voici un exemple rapide :

// This applies from 600px onwards
body {
  background: green;
}

// This applies from 0px to 600px
@media (max-width: 600px) {
  body {
    background: red;
  }
}

aura une couleur d'arrière-plan verte pour toutes les largeurs. Si l'écran est inférieur à 600px, la couleur de fond devient rouge.