Comment fonctionnent « @media screen et (max-width : 1024px) » en CSS ?

Comprendre la règle "@media screen et (max-width : 1024px)" en CSS

Le fragment de code fourni est un média CSS requête qui semble cibler des résolutions d’écran ou des tailles d’appareil spécifiques. Décomposons ses composants pour comprendre son objectif :

@media screen : Cette partie de la requête multimédia précise que les règles CSS qu'elle contient ne doivent être appliquées que lorsque l'appareil s'identifie comme un catégorie "écran". Cela s'applique généralement aux navigateurs de bureau et à certains smartphones.

et (max-width : 1024px) : La deuxième partie de la requête multimédia vérifie la largeur maximale de la fenêtre du navigateur, y compris la barre de défilement. . Elle limite l'application des règles CSS aux appareils ou fenêtres de navigateur dont la largeur est égale ou inférieure à 1024 pixels.

Combinée : En réunissant ces deux composants, la requête média "@media screen and (max-width: 1024px)" signifie que les règles CSS spécifiques qu'il contient ne seront appliquées qu'aux appareils considérés comme des appareils "à écran" avec une largeur maximale de 1024 pixels.

Application pratique :

Le code CSS dont vous avez hérité semble cibler les images avec la classe "bg" lorsque l'écran fait moins de 1024 pixels de large. Dans cette situation, l'image sera centrée horizontalement sur l'écran avec un ajustement de marge appliqué.

Compatibilité des appareils :

Il est important de noter que les anciens navigateurs peuvent ne pas prendre en charge la propriété "max-width" dans les requêtes multimédias. De plus, certains navigateurs de bureau peuvent être définis sur une largeur supérieure à 1024 pixels, les règles CSS ne seront donc pas appliquées dans ces cas.

Conclusion :

En comprenant la notation "@media screen and (max-width: 1024px)", vous pouvez cibler efficacement des tailles d'appareil ou des résolutions d'écran spécifiques dans votre code CSS et personnaliser l'apparence ou la fonctionnalité de votre site Web en fonction de ces critères.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!