Que signifient l'écran @media et (largeur maximale: 1024 pixels) en CSS?

J'ai trouvé ce morceau de code dans un fichier CSS dont j'ai hérité, mais je n'y trouve aucun sens:

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

Concrètement, que se passe-t-il sur la première ligne?

C'est une requête médiatique. Il empêche l'exécution du CSS qu'il contient à moins que le navigateur ne réussisse les tests qu'il contient.

Les tests de cette requête média sont les suivants:

1. @media screen- Le navigateur s'identifie comme étant dans la catégorie «écran». Cela signifie à peu près le navigateur lui - même considère-classe de bureau - par opposition à , par exemple un ancien navigateur de téléphone mobile (notez que l'iPhone, et d' autres navigateurs de smartphones, ne s'identifient comme étant dans la catégorie d'écran), ou un lecteur d' écran - et qu'il est l' affichage la page à l'écran, plutôt que de l'imprimer.

2. max-width: 1024px- la largeur de la fenêtre du navigateur (y compris la barre de défilement) est de 1024 pixels ou moins. ( Pixels CSS, pas pixels de l'appareil .)

Ce deuxième test suggère que cela vise à limiter le CSS à l'iPad, à l'iPhone et aux appareils similaires (car certains navigateurs plus anciens ne sont pas pris en charge max-widthdans les requêtes multimédias et de nombreux navigateurs de bureau sont exécutés sur une largeur supérieure à 1024 pixels).

Cependant, il s'appliquera également aux fenêtres de navigateur de bureau de moins de 1024 pixels de large, dans les navigateurs qui prennent en charge la max-widthrequête multimédia.

Voici la spécification Media Queries, elle est assez lisible:

• http://www.w3.org/TR/css3-mediaqueries/

Cela limite les styles qui y sont définis à l'écran (par exemple, pas d'impression ou d'autres supports) et limite encore la portée aux fenêtres d'une largeur de 1024 pixels ou moins.

http://www.css3.info/preview/media-queries/

Il dit: Lorsque la page s'affiche à l'écran à une résolution de 1024 pixels maximum, appliquez la règle suivante.

Comme vous le savez peut-être déjà, vous pouvez cibler certains CSS sur un type de support qui peut être un ordinateur de poche, un écran, une imprimante, etc.

Jetez un œil ici pour plus de détails ..

Dans mon cas, je voulais centrer mon logo sur un site Web lorsque le navigateur en a 800pxou moins, alors je l'ai fait en utilisant la @mediabalise:

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

Cela a fonctionné pour moi, j'espère que quelqu'un trouvera cette solution utile. :) Pour plus d'informations, voir ceci .

C'est Media Queries . Il vous permet d'appliquer une partie des règles CSS uniquement aux périphériques spécifiques sur une configuration spécifique.

Cela signifie que si la taille de l'écran est 1024, alors appliquez uniquement les règles CSS ci-dessous.

Si votre condition de requête multimédia est vraie, votre CSS avec cette condition fonctionnera. Cela signifie que le CSS dans la taille des pixels de la condition de votre requête multimédia aura un effet, ou bien si la condition échoue, cela signifie que si la largeur de l'appareil est supérieure à 1024 pixels, votre CSS ne fonctionnera pas. Parce que la condition de votre requête multimédia est fausse.

max-width est votre limite CSS maximale jusqu'à cette largeur.

Il convient également de noter que vous pouvez utiliser 'em' ainsi que 'px' - les blogs et les sites basés sur le texte le font car le navigateur prend alors des décisions de mise en page plus relatives au contenu du texte.

Sur Wordpress twentysixteen, je voulais que mon slogan s'affiche sur les mobiles ainsi que sur les ordinateurs de bureau, alors j'ai mis cela dans mon thème enfant style.css

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}

Il cible une fonctionnalité spécifiée pour exécuter d'autres codes ...

Par exemple:

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;

  }

l'extrait ci-dessus indique si le périphérique qui exécute ce programme a un écran de 600 pixels ou moins de 600 pixels de largeur, dans ce cas, notre programme doit exécuter cette partie.