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

245

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?

Yarin
la source

Réponses:

306

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:

Paul D. Waite
la source
si ma largeur d'écran est supérieure à 1200px comment spécifier dans l'écran
@media
2
vous pouvez simplement utiliser (min-width: 1200px) au lieu d'utiliser max-width, ou vous pouvez simplement l'avoir comme CSS régulier sans requête multimédia et utiliser 'max-width' pour écraser cela quand il va sur un appareil plus petit
MintWelsh
Existe-t-il un moyen d'effectuer le style sur le bureau uniquement (PAS mobile du tout) pendant que vous redimensionnez la fenêtre? Donc, si je redimensionne manuellement mon navigateur à une largeur maximale de 720 pixels, il utiliserait une déclaration multimédia qui vous détecte sur un ordinateur de bureau non mobile, et vous êtes maintenant en dessous de 720 pixels par exemple?
wharfdale
@ JordanC26: il semble que vous posiez une question, et pour cela, vous voulez le bouton "Poser une question" dans le coin supérieur droit de l'écran. Avant de l'utiliser, vous pouvez définir ce que vous entendez par «ordinateur de bureau» et «mobile». Est un mobile ou un ordinateur de bureau Microsoft Surface? Pourquoi? Qu'en est-il des futurs appareils qui n'ont pas encore été inventés?
Paul D. Waite
55

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/

Chris Bentley
la source
10

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

Lorenzo
la source
3
Je ne ferais pas l'hypothèse qu'il le sait.
jcolebrand
6

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 .

yehanny
la source
1

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

Kumar Nitesh
la source
1

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.

Anup
la source
0

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;
    }
}
MattB
la source
0

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.

Shahin Ghasemi
la source