Ce n' @media screen and (max-width: 1024px) signifie en CSS?

J'ai trouvé ce bout de code dans un fichier CSS, j'ai hérité, mais je ne peux pas faire sens:

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

Plus précisément, ce qui se passe sur la première ligne?

InformationsquelleAutor Yarin | 2010-11-15
  1. 305

    C'est une requête de média. Il empêche le CSS à l'intérieur de cours d'exécution, sauf si le navigateur passe les tests qu'il contient.

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

    1. @media screen — Le navigateur s'identifie lui-même comme étant dans le “écran” de la catégorie. Cela signifie à peu près le navigateur considère lui-même de bureau de classe — par opposition par exemple à un âgées navigateur du téléphone portable (à noter que l'iPhone, et autres smartphones navigateurs, ne identifier eux-mêmes comme étant dans la catégorie écran), ou un lecteur d'écran, et que c'est l'affichage de 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. (CSS pixels, pas de l'appareil pixels.)

    Que le deuxième test suggère cette mesure est destinée à limiter le CSS pour l'iPad, l'iPhone et les appareils similaires (parce que certains anciens navigateurs qui ne supportent pas max-width dans les requêtes des médias, et beaucoup de navigateurs de bureau sont exécutés plus large que 1024 pixels).

    Cependant, il sera également d'application pour les navigateurs de bureau de windows à moins de 1024 pixels de large, dans les navigateurs qui prennent en charge les max-width media query.

    Voici les Requêtes de Média spec, c'est assez lisible:

    • si mon la largeur de l'écran est au-dessus de 1200px comment spécifier dans @media screen
    • vous pouvez simplement utiliser (min-width: 1200px) au lieu d'utiliser max-width, ou peut-être vous avez comme CSS normal sans une requête de média et de l'utilisation de 'max-width' pour le remplacer quand il va à un petit appareil
    • Est-il un moyen pour effet de style sur le bureau (PAS portable du tout) alors que vous re-taille de la fenêtre d'affichage? Donc, si j'ai de nouveau manuellement la taille de mon navigateur pour "max-width 720px" de l'ensemble, il serait d'utiliser un support de déclaration qui détecte vous sur un ordinateur de bureau pas mobile, et vous êtes maintenant au-dessous de 720px par exemple?
    • on dirait que vous êtes en posant une question, et que vous voulez le “Poser une Question” bouton en haut à droite de l'écran. Avant d'utiliser ce bien, vous pouvez définir ce que vous entendez par “bureau” et “mobile”. Est une Surface de Microsoft mobile ou un ordinateur de bureau? Pourquoi? Ce sujet de l'avenir des appareils qui n'ont pas encore été inventée?
    InformationsquelleAutor Paul D. Waite
  2. 55

    C'est de limiter les styles y sont définies à l'écran (par exemple, pas d'impression ou de certains autres médias), et est en outre de limiter la portée de fenêtres qui sont 1024px ou de moins dans la largeur.

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

    InformationsquelleAutor Chris Bentley
  3. 10

    Il dit: Lorsque la page se rendre sur l'écran à une résolution maximale de 1024 pixels en largeur puis appliquer la règle qui suivent.

    Comme vous le savez peut-être déjà, en fait, vous pouvez cibler un peu de CSS à un type de support qui peut être un ordinateur de poche, écran, imprimante et ainsi de suite.

    Ont un look ici pour plus de détails..

    • Je ne voudrais pas faire l'hypothèse qu'il sait.
    InformationsquelleAutor Lorenzo
  4. 5

    C'est Les Media Queries. Il permet d'appliquer une partie des règles CSS uniquement pour les appareils spécifiques de configuration spécifique.

    InformationsquelleAutor Crozin
  5. 5

    Dans mon cas, j'ai voulu centrer mon logo sur un site web lorsque le navigateur a 800px ou moins, alors je l'ai fait à l'aide de la @media tag:

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

    Il a travaillé pour moi, l'espoir, quelqu'un à trouver la solution utile. 🙂 Pour plus d'informations, voir cette.

    InformationsquelleAutor yehanny
  6. 1

    Cela signifie que si la taille de l'écran est de 1024 alors seulement d'appliquer au-dessous de règles CSS.

    InformationsquelleAutor Kumar Nitesh
  7. 1

    Si votre requête des médias condition est vraie alors votre CSS avec cette condition de travail. Cela signifie que le CSS dans votre requête des médias de l'état de pixels taille de l'effet, ou bien si la condition échouera qui veux dire que si l'appareil est la largeur est supérieure à 1024px de votre CSS ne fonctionne pas.Parce que votre requête de média condition fausse.

    max-width est votre max CSS limite jusqu'à ce que la largeur.

    • J'ai quelques difficultés à l'analyse de cette réponse...
    InformationsquelleAutor Anup
  8. 0

    Également intéressant de noter que vous pouvez utiliser 'em', ainsi que 'px' - blogs de texte et de sites à le faire parce que le navigateur mise en page des décisions plus par rapport à la teneur du texte.

    Sur WordPress twentysixteen je voulais que mon slogan pour l'affichage sur les mobiles ainsi que les ordinateurs de bureau, alors j'ai mis ça dans mon thème enfant style.css

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

    Il vise une certaine fonction à exécuter certains 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 est dire si le périphérique que l'exécution de ce programme ont d'écran avec 600px ou moins de 600px de largeur, dans ce cas, notre programme doit exécuter cette partie .

    InformationsquelleAutor shahin gh