Comment masquer les éléments à l'aide de requêtes multimédias

Les requêtes médiatiques CSS sont appelées les requêtes qui vous permettent de modifier l'apparence d'un site Web en fonction de l'appareil sur lequel il est affiché. Ces requêtes utilisent la règle CSS @Media et vous obligent à définir un type de média et certaines fonctionnalités médiatiques sous forme d'expressions logiques. Il y a beaucoup de choses que vous pouvez faire à votre site Web réactif en utilisant les requêtes médiatiques, cependant, dans cet article, nous allons discuter de la façon dont vous pouvez masquer vos éléments en utilisant ces requêtes.

Commençons.

Comment masquer les éléments à l'aide de requêtes multimédias

Comme déjà mentionné, les requêtes multimédias vous aident à concevoir des pages Web réactives. Ces sites Web réactifs vous obligent à avoir une certaine taille d'écran pour avoir un accès complet à certaines fonctionnalités. Ici, nous allons montrer comment cacher des éléments à l'aide de requêtes multimédias, mais avant cela, comprenons d'abord la syntaxe de ces requêtes.

Syntaxe

Écran @Media et (Min-Width: 480px) et (max-largeur: 720px)

//Code;

Une requête 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. Par exemple, nous avons utilisé le type de support d'écran ici dans la syntaxe ci-dessus. Par la suite, certains opérateurs comme 'et' sont utilisés pour combiner des fonctionnalités des médias tels que la largeur min ou la largeur maximale.

Maintenant que nous avons une bonne compréhension de la syntaxe des requêtes médiatiques, apprenons à cacher des éléments en utilisant ces requêtes à l'aide d'un exemple.

Html

Cela sera visible si la largeur d'écran maximale est de 700px ou plus large.
Cela sera visible si la largeur d'écran maximale est de 300px ou plus large.
Cela sera visible si la largeur d'écran maximale est de 200px ou plus large.

Ici, nous avons créé trois éléments div et attribué une classe différente à chacun d'eux pour démontrer comment cacher des éléments sur la base de différentes tailles d'écran.

CSS

div.récipient
Color en arrière-plan: Rosybrown;
Largeur: 200px;
hauteur: 100px;
rembourrage: 15px;
marge: 5px;
Affichage: bloc en ligne;

Dans le code ci-dessus, nous stylisons les trois éléments Div à la fois en utilisant la classe de conteneurs. Les éléments ont reçu une couleur de fond, une largeur, une hauteur, un rembourrage et une marge. De plus, nous affichons ces éléments en tant que bloc de ligne car plus tard, lorsque vous utilisez les requêtes multimédias, leur affichage doit être défini à aucun pour les masquer.

CSS

Écran @media et (max-largeur: 700px)
div.grand
Affichage: aucun;

Dans la requête ci-dessus, nous spécifions que les appareils qui ont une largeur maximale jusqu'à 700px, le div avec le nom de classe «grand» se cachera car l'écran a été défini sur aucun. Cependant, si la largeur de l'écran est de 700px ou plus large, les éléments seront visibles.

CSS

Écran @media et (max-largeur: 300px)
div.moyen
Affichage: aucun;

Pendant ce temps, cette requête indique pour montrer le conteneur div avec le nom de classe «médium» uniquement lorsque la largeur de l'écran est de 300px ou plus large, sinon elle sera cachée.

CSS

Écran @media et (max-largeur: 200px)
div.petit
Affichage: aucun;

Et enfin, la requête ci-dessus spécifie pour afficher le conteneur div dans la condition lorsque la largeur de l'écran est de 200px ou plus large, sinon, la requête multimédia masquera le

Sortir

Lorsque la taille de l'écran est de 700px ou plus.

Lorsque la taille de l'écran est comprise entre 300px et 700px.

Et lorsque la largeur de l'écran se situe entre 200px et 300px.

Les éléments ont été cachés avec succès à l'aide de requêtes multimédias.

Conclusion

Dans le but de cacher des éléments avec des requêtes multimédias, vous devez simplement définir leur affichage sur aucune dans la requête multimédia spécifique. Les requêtes médiatiques s'avèrent très utiles lors de la conception de sites Web réactifs, vous pouvez donc les utiliser afin de rendre vos éléments accessibles en fonction de la taille de l'écran de l'appareil. Ici, dans cet article, nous avons démontré à l'aide d'un exemple comment vous pouvez masquer vos éléments à l'aide de requêtes multimédias.