Min-largeur et largeur maximale dans les requêtes médiatiques | Expliqué

Un site Web réactif est appelé un site Web dynamique qui modifie sa structure en fonction de l'appareil sur lequel il est affiché. Il peut modifier son comportement en fonction de la largeur de l'écran, de la résolution d'écran, de l'orientation, etc. de l'appareil. Maintenant, pour créer un tel site Web, les développeurs utilisent des requêtes médiatiques. Ici, dans cet article, les sujets discutés sont les suivants.

1. Requête médiatique
2. Points d'arrêt du CSS
3. Largeur minuscule
4. Largeur maximale
5. Combiner les deux
6. Quand utiliser lequel: largeur min ou largeur maximale

Requête médiatique

Des requêtes multimédias ont été introduites dans CSS version 3 qui permet à ses utilisateurs de créer des sites Web réactifs grâce à l'utilisation de la règle @Media. Cette règle vous oblige à indiquer le type de média tel que l'impression, l'écran, la parole ou partout avec certaines expressions logiques qui spécifient certaines fonctionnalités médiatiques telles que la largeur, la résolution, la densité, etc.

Ces requêtes permettent essentiellement l'altération de la disposition Web en fonction du type d'appareil tel que le bureau, l'ordinateur portable, le mobile, etc. Ici, nous vous avons montré comment définir une requête multimédia.

Syntaxe

Écran @media et (largeur min: 420px) et (largeur maximale: 650px)
@règle
type de support
fonction médiatique
fonction médiatique
opérateur
opérateur

Une requête multimédia commence toujours par la règle @media et vous oblige à spécifier le type de support sur lequel la requête doit être appliquée. Ensuite, vous devez énoncer le type de support d'écran et utiliser des opérateurs comme 'et' pour combiner des fonctionnalités des médias telles que la largeur min ou la largeur maximale.

Les requêtes multimédias sont spécifiées à certains points qui sont appelés points d'arrêt des requêtes médiatiques. Voir la prochaine section pour les apprendre en détail.

Points d'arrêt du CSS

Les points d'arrêt dans CSS sont appelés les points sur lesquels la structure d'un site Web change correspondant à la taille de l'écran du type de périphérique. Les points d'arrêt sont décidés soit sur le type de périphérique, soit sur le type de contenu. Certains points d'arrêt courants sont les suivants.

1. Pour les appareils mobiles: 320px à 480px
2. Pour les tablettes et iPads: 481px à 768px
3. Pour les ordinateurs portables: 769px à 1024px
4. Pour les ordinateurs de bureau: 1025px à 1200px

En lisant les explications ci-dessus, vous devez avoir remarqué que nous avons utilisé deux fonctionnalités de médias à largeur de mine et à largeur maximale. Vous devez vous demander ce que ce sont et quand les utiliser. Ci-dessous, nous vous avons donné tous les détails essentiels.

Largeur minuscule

La fonction médiatique de la largeur min spécifie la largeur minimale d'un appareil spécifique. Par exemple, dans la section ci-dessus, nous avons enrôlé certaines largeurs d'écran sur la base du type d'appareil tel que la largeur d'écran minimale des appareils mobiles est de 320px.

Exemple

Écran @media et (Min-largeur: 600px)
p
taille de police: 16px;

Dans le code ci-dessus, nous avons spécifié que lorsque la largeur minimale de l'écran est de 600px ou plus large, la taille de la police du paragraphe passera à 16px. Ainsi, tout appareil avec cette largeur d'écran affichera le texte du paragraphe dans la taille de la police spécifiée.

Largeur maximale

La fonction médiatique de largeur maximale indique la largeur maximale d'un appareil particulier. Par exemple, la largeur d'écran maximale des appareils mobiles est de 480px. Consultez l'exemple ci-dessous pour le comprendre d'une meilleure manière.

Exemple

Écran @media et (max-largeur: 700px)
p
taille de police: 25px;

Le code ci-dessus indique que lorsque la largeur d'écran maximale est de 700px ou moins, la taille de la police du paragraphe passera à 25px. Tout appareil rendant cette largeur d'écran affichera le texte du paragraphe dans la taille de la police spécifiée.

Combiner les deux

Vous pouvez également utiliser les deux fonctionnalités des médias en les combinant avec l'opérateur 'et'.

Exemple

P
style de police: audacieux;

Écran @Media et (Min-Width: 600px) et (max-largeur: 700px)
p
Style de police: italique;

Le code ci-dessus spécifie que si la largeur de l'écran se situe entre 600px et 700px, le style de police sera italique sinon le style de police sera audacieux.

Quand utiliser lequel: largeur min ou largeur maximale

Si vous concevez d'abord votre site Web pour des appareils plus petits, définissez vos points d'arrêt CSS par défaut avec la largeur min et ajustez les plus grands appareils en conséquence.

En attendant, si vous concevez d'abord pour des appareils plus grands, utilisez la largeur maximale, puis réglez pour les plus petits appareils en conséquence.

Conclusion

La largeur min et la largeur maximale sont des fonctionnalités médiatiques qui correspondent à un certain type de média qui a été spécifié dans la requête multimédia. La largeur minimale spécifie la largeur d'écran minimale d'un appareil spécifique, en attendant la fonction médiatique de largeur maximale indique la largeur d'écran maximale d'un appareil spécifique. Si vous concevez d'abord votre site Web pour les petits appareils, définissez d'abord vos points d'arrêt initiaux avec la largeur min, alors que si vous concevez d'abord pour des appareils plus grands, utilisez d'abord la largeur maximale. Cet article traite des fonctionnalités des médias de la largeur maximale en détail avec des exemples pertinents.