css se changeant lors de l’application de requêtes de support css pour une conception réactive

J’applique des requêtes de support css pour que mon site Web fonctionne aussi bien sur un ordinateur portable que sur un ordinateur portable. J’utilise la requête multimédia suivante pour mobile

@media only screen and (min-device-width : 321px) and (max-device-width:480px) 

et suivant pour ordinateur portable

 @media only screen and (min-device-width: 1100px) 

Le problème, c’est quand j’applique ma première requête pour mobile et ma seconde requête pour ordinateur portable. L’interface utilisateur mobile est correcte, mais l’interface utilisateur pour ordinateur portable affiche des résultats différents. .

S’il vous plaît, guidez-moi où je me trompe …

inclure ceci dans (si ce n’est pas le cas)

   <-- user-scalable=yes if you want user to allow zoom --> 

changez votre style @media car // change la largeur selon vos besoins

 @media only screen (max-width: 500px) { // or as per your needs, as I try to explain below } 

Maintenant j’essaie d’expliquer peut-être .. 🙂

 @media (max-width:500px) 

pour une fenêtre d’une max-width de 500px , vous souhaitez appliquer ces styles. À cette taille, vous parlez de tout ce qui est plus petit qu’un écran de bureau dans la plupart des cas.

 @media screen and (max-width:500px) 

pour un appareil avec un screen et une fenêtre d’une max-width de 500px appliquez le style. Ceci est presque identique à ce qui est décrit ci-dessus, sauf que vous spécifiez un screen par opposition aux autres types de support, le plus commun étant l’ print .

 @media only screen and (max-width:500px) 

Voici une citation tout droit du W3C pour expliquer celle-ci.

Le mot clé ” only ” peut également être utilisé pour masquer les feuilles de style des anciens agents utilisateurs. Les agents utilisateurs doivent traiter les requêtes de média commençant par ‘seulement’ comme si le mot clé ‘seulement’ n’était pas présent.

Comme il n’existe pas de type de média ” only “, la feuille de style devrait être ignorée par les anciens navigateurs.

J’essaie de mettre plus d’informations ici, recueillies à partir du Web.

 @media all and (min-width: 500px) { } @media all and (max-width: 500px) and (min-width: 300px) { } @media all and (max-width: 299px) { } 

 If 

C’est ce que sont les requêtes de médias: instructions logiques if. “Si” ces choses sont vraies à propos du navigateur, utilisez le CSS à l’intérieur.

 And 

Le mot clé et.

 @media (min-width: 600px) and (max-width: 800px) { html { background: red; } } Or 

Virgule séparée.

 @media (max-width: 600px), (min-width: 800px) { html { background: red; } } 

Techniquement, ces requêtes sont traitées de manière à séparer les requêtes de média, mais c’est efficace et / ou.

 Not 

Inverser la logique avec le mot clé non.

 @media not all and (max-width: 600px) { html { background: red; } } 

Ne pas faire (max-width: 600px) ne semble pas fonctionner pour moi, d’où la syntaxe légèrement funky ci-dessus. Peut-être que quelqu’un peut m’expliquer cela. Notez que non seulement fonctionne pour la requête multimédia en cours, donc si vous séparez les virgules, cela affecte uniquement la requête multimédia dans laquelle elle se trouve. Notez également que not renverse la logique de la requête multimédia dans son ensemble, et non de parties individuelles. pas x et y = pas (x et y) ≠ (pas x) et y

Exclusif

Pour vous assurer qu’une seule requête multimédia est effective à la fois, définissez les chiffres (ou peu importe) de manière à ce que cela soit possible. Il peut être plus facile de les gérer mentalement de cette façon.

 @media (max-width: 400px) { html { background: red; } } @media (min-width: 401px) and (max-width: 800px) { html { background: green; } } @media (min-width: 801px) { html { background: blue; } } 

Logiquement, cela ressemble un peu à une instruction switch, mais sans un moyen simple de faire “si aucun de ces éléments ne correspond à cela” comme par défaut.

Primordial

Rien n’empêche plus d’une requête multimédia d’être vraie en même temps. Il peut être plus efficace de l’utiliser dans certains cas plutôt que de les rendre tous exclusifs.

 @media (min-width: 400px) { html { background: red; } } @media (min-width: 600px) { html { background: green; } } @media (min-width: 800px) { html { background: blue; } } 

Les requêtes multimédias n’ajoutent aucune spécificité aux sélecteurs qu’elles contiennent, mais l’ordre des sources importe toujours. Ce qui précède fonctionnera car ils sont correctement commandés. Échangez cet ordre et lorsque la largeur de la fenêtre du navigateur dépasse 800 pixels, l’arrière-plan sera rouge, peut-être de manière inattendue.

Mobile First

Vos styles d’écran de petite taille sont dans votre CSS d’écran habituel, puis, à mesure que l’écran s’agrandit, vous annulez ce dont vous avez besoin. Donc, les requêtes multimédia min-largeur en général.

 html { background: red; } @media (min-width: 600px) { html { background: green; } } 

Le bureau d’abord

Vos styles d’écran de grande taille sont dans votre CSS d’écran habituel, puis lorsque vous réduisez l’écran, vous annulez ce dont vous avez besoin. Donc, les requêtes multimédias de largeur maximale en général.

 html { background: red; } @media (max-width: 600px) { html { background: green; } } 

Vous pouvez être aussi complexe que vous voulez avec cela.

 @media only screen and (min-width: 100px), not all and (min-width: 100px), not print and (min-height: 100px), (color), (min-height: 100px) and (max-height: 1000px), handheld and (orientation: landscape) { html { background: red; } } 

Notez que le seul mot-clé était destiné à empêcher les navigateurs prenant en charge les requêtes autres que les médias de charger la feuille de style ou d’utiliser les styles. Je ne sais pas à quel point cela a été utile / utile.

Et pour les requêtes média priorites

sources: un deux trois quatre cinq