Quel écran does @media et (max-width : 1024px) moyen en CSS ?

Question

J’ai trouvé ce morceau de code dans un fichier CSS, que j’ai hérité, mais je ne peux pas faire n’importe quel sens hors de lui :

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

Answer 1

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 plus vieux navigateur du téléphone portable (à noter que l'iPhone, et autres smartphones navigateurs, ne s'identifient 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.)

Ce 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 l' max-width media query.

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

• http://www.w3.org/TR/css3-mediaqueries/

Answer 2

C’est de limiter les styles définis il y à l’écran (par exemple pas imprimer ou certains autres médias) et est plus limitant aux fenêtres qui sont 1024px ou moins en largeur.

http://www.CSS3.info/Preview/Media-Queries/

Answer 3

Il est dit : lorsque la page rendue à l’écran avec une résolution max 1024 pixels de largeur, puis appliquer la règle qui suivent.

Comme vous le savez déjà, en fait, vous pouvez cibler certains CSS à un type de média qui peut être l’un des portables, écran, imprimante, et ainsi de suite.

Jetez un oeil ici pour plus de détails...

Answer 4

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 en utilisant la balise @media :

Cela a fonctionné pour moi, quelqu'un espère trouver cette solution utile. :), pour plus d’informations, consultez : http://www.w3schools.com/css/css_mediatypes.asp

Answer 5

Voilà les questions des médias. Il vous permet d’appliquer le cadre de règles CSS uniquement pour les périphériques spécifiques sur la configuration spécifique.