Qu'est-ce que @media écran et (max-width: 1024px) moyenne en CSS?

StackOverflow https://stackoverflow.com/questions/4189868

  •  10-10-2019
  •  | 
  •  

Question

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

@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?

Était-ce utile?

La solution

C'est une requête de médias. Il empêche le CSS à l'intérieur d'être exécuté à moins que le navigateur passe les tests qu'il contient.

Les tests dans ce média requête sont:

  1. @media screen - Le navigateur identifie lui-même 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 plus navigateur de votre téléphone mobile (notez que l'iPhone, et d'autres navigateurs de smartphones, faire s'identifier comme étant dans la catégorie d'écran), ou un lecteur d'écran - et il affiche le 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, et non pas les pixels de dispositif .)

Ce second test suggère cela est destiné à limiter le CSS à l'iPad, iPhone et autres appareils similaires (parce que certains navigateurs plus anciens ne prennent pas en charge max-width dans les requêtes des médias, et un grand nombre de navigateurs de bureau sont gérés plus de 1024 pixels) .

Toutefois, il s'appliquera également aux fenêtres du navigateur de bureau moins de 1024 pixels de large, dans les navigateurs qui prennent en charge la requête média max-width.

Voici les spécifications des médias Requêtes, il est assez facile à lire:

Autres conseils

Il est de limiter les styles définis là à l'écran (par exemple, pas imprimer ou un autre support), et est en outre limiter la portée de fenêtres qui sont 1024px de largeur ou moins.

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

Il dit:. Lorsque la page rendu sur l'écran à une résolution de max 1024 pixels en largeur puis appliquer la règle selon laquelle suite

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

Jetez un oeil pour plus de détails ..

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

Dans mon cas, je voulais centrer mon logo sur un site Web lorsque le navigateur a 800px ou moins, alors 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;
  }
}

Il a travaillé pour moi, l'espoir que quelqu'un trouve cette solution utile. :) Pour plus d'informations, consultez ce .

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

Si l'état de votre média est vrai, alors votre CSS avec cette condition fonctionnera. Cela signifie CSS de votre taille de pixel de l'état de requête médias l'effet de la volonté, ou bien si la condition échoue que moyenne si la largeur de l'appareil est supérieure à 1024px que votre CSS ne sera pas work.Because votre condition de requête médias faux.

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

Il convient également de noter que vous pouvez utiliser « em », ainsi que « px » - blogs et les sites texte basé le faire parce que le navigateur prend des décisions de mise en page plus par rapport au contenu du texte

.

Sur Wordpress twentysixteen je voulais mon slogan à l'affichage sur les mobiles, ainsi que les ordinateurs de bureau, donc je mets dans mon thème enfant style.css 

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

Il cible une caractéristique 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;

  }

le mot de extrait ci-dessus si le dispositif d'exécuter ce programme ont écran avec 600px ou moins de 600px de largeur, dans ce cas, notre programme doit exécuter cette partie.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top