web-dev-qa-db-fra.com

Que signifient @media screen et (max-width: 1024px) 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; }
}

Plus précisément, que se passe-t-il en première ligne?

csscss3media-queries
244
Yarin

C’est une question médiatique. Il empêche l'exécution du CSS à l'intérieur de celui-ci à moins que le navigateur ne réussisse les tests qu'il contient.

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

  1. @media screen - Le navigateur s'identifie comme appartenant à la catégorie "écran". Cela signifie à peu près que le navigateur se considère lui-même comme un ordinateur de bureau - par opposition à, par exemple. un navigateur de téléphone portable plus ancien (notez que l'iPhone et les autres navigateurs de smartphones, font s’identifient comme appartenant à la catégorie d’écran), ou à un lecteur d’écran - et qu’il affiche 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 de pixels du périphérique .)

Ce second test suggère que cela vise à limiter le CSS aux iPad, iPhone et autres appareils similaires (parce que certains navigateurs plus anciens ne supportent pas max-width dans les requêtes multimédia, et beaucoup de navigateurs de bureau ont une largeur supérieure à 1024 pixels. ).

Toutefois, cela s'appliquera également aux fenêtres de navigateur de bureau d'une largeur inférieure à 1024 pixels, dans les navigateurs prenant en charge la requête multimédia max-width.

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

305
Paul D. Waite

Cela limite les styles définis ici à l'écran (par exemple, pas d'impression ou un autre support) et limite également la portée aux fenêtres d'affichage d'une largeur inférieure ou égale à 1024 pixels.

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

55
Chris Bentley

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

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

Regardez ici pour plus de détails ..

10
Lorenzo

Dans mon cas, je voulais centrer mon logo sur un site Web lorsque le navigateur utilise 800px ou moins, puis je l’ai fait en utilisant la balise @media:

@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 this .

5
yehanny

C'est Requêtes avec les médias . Il vous permet d’appliquer une partie des règles CSS uniquement aux périphériques spécifiques d’une configuration spécifique.

5
Crozin

Cela signifie que si la taille de l'écran est de 1024, alors n'appliquez que sous les règles CSS.

1
Kumar Nitesh

Si votre condition de requête multimédia est vraie, votre CSS avec cette condition fonctionnera. Cela signifie que CSS aura une incidence sur la taille de pixel de la condition de votre requête multimédia. Sinon, si la condition échouera, cela signifie que si la largeur du périphérique est supérieure à 1024px, 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.

1
Anup

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

Sur Wordpress vingt-six ans, je voulais que mon slogan soit affiché sur les mobiles ainsi que sur les ordinateurs de bureau. Je l'ai donc mis dans mon thème de style enfant.css.

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

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 que si le périphérique qui exécute ce programme a un écran d'une largeur inférieure ou égale à 600 px, dans ce cas, notre programme doit exécuter cette partie.

0
shahin gh