Que signifie @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'en ai aucun sens:
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
Plus précisément, que se passe-t-il sur la première ligne?
9 réponses
C'est une requête média. Il empêche le CSS à l'intérieur d'être exécuté à moins que le navigateur ne passe les tests qu'il contient.
Les tests dans cette requête média sont:
@media screen- le navigateur s'identifie comme étant dans la catégorie "écran". Cela signifie à peu près que le navigateur se considère comme une classe de bureau-par opposition à un Ancien navigateur de téléphone mobile (notez que l'iPhone, et d'autres navigateurs de smartphones, font s'identifier comme étant dans le catégorie d'écran), ou un screenreader - et qu'il affiche la page à l'écran, plutôt que de l'imprimer.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 périphérique .)
Ce deuxième test suggère que ceci est destiné à limiter le CSS à l'iPad, l'iPhone et les périphériques similaires (parce que certains navigateurs plus anciens ne prennent pas en charge max-width dans les requêtes multimédia, et beaucoup de navigateurs de bureau sont exécutés plus large que 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 requête multimédia max-width.
Voici la spécification Media Queries, c'est assez lisible:
Cela limite les styles définis à l'écran (par exemple, pas d'impression ou d'autres médias) et limite davantage la portée aux fenêtres qui ont une largeur de 1024px ou moins.
Il est dit: Lorsque la page est affichée à l'écran à une résolution de 1024 pixels maximum, appliquez la règle qui suit.
Comme vous le savez peut-être déjà en fait, vous pouvez cibler certains CSS vers un type de support qui peut être un ordinateur de poche, écran, imprimante et ainsi de suite.
Jetez un oeil ici pour plus de détails..
C'est requêtes Médias . Il vous permet d'appliquer une partie des règles CSS uniquement aux périphériques spécifiques sur une 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;
}
}
Cela a fonctionné pour moi, j'espère que quelqu'un trouvera cette solution utile. :) Pour plus d'informations, voir ce.
Cela signifie que si la taille de l'écran est 1024, 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 CSS dans la condition de votre requête multimédia la taille du pixel aura un effet, sinon si la condition échouera, cela signifie que la largeur du périphérique est supérieure à 1024px que votre CSS ne fonctionnera pas.Parce que 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 parce que le navigateur prend des décisions de mise en page plus relatives au contenu du texte.
Sur Wordpress twentysixteen je voulais mon slogan pour afficher sur les mobiles ainsi que les ordinateurs de bureau, donc je mets cela dans mon style de thème enfant.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 avec une largeur de 600px ou inférieure à 600px, dans ce cas, notre programme doit exécuter cette partie .