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

Comprendre l'écran @media et (largeur maximale : 1024px) en CSS

Rencontrer un code CSS inconnu peut être déroutant. Dans un cas récent, un développeur a hérité d'un code qui incluait la ligne énigmatique suivante :

@media screen and (max-width: 1024px) {
    img.bg {
        left: 50%;
        margin-left: -512px;
    }
}

Pour décoder cette ligne énigmatique, examinons la signification des requêtes média.

Les requêtes média, comme ceux présentés dans le code, servent à appliquer des règles de style conditionnellement en fonction de certains critères. Dans ce cas, les critères testés sont :

1. @media screen : Cela garantit que les règles CSS ne seront appliquées qu'aux appareils identifiés comme navigateurs de bureau.

2. (max-width : 1024px) :Cette condition restreint l'application des règles CSS aux appareils dont la largeur de fenêtre de navigateur (y compris les barres de défilement) est inférieure ou égale à 1024 pixels.

Sur la base de ces critères, le CSS les règles contenues entre les accolades ne s'appliqueront qu'aux appareils qui remplissent les deux conditions, qui visent principalement à limiter le style à des appareils tels que l'iPad et iPhone.

Il est important de noter, cependant, que les fenêtres du navigateur de bureau dont la largeur est inférieure à 1 024 pixels hériteront également des styles CSS dans les navigateurs prenant en charge la requête multimédia de largeur maximale.

Pour en savoir plus. Pour plus de précisions, reportez-vous à la spécification complète Media Queries à l'adresse : http://www.w3.org/TR/css3-mediaqueries/

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!