Quelqu'un peut-il expliquer les requêtes de médias CSS?

Question

J'ai lu l'article à leur sujet au css3.info, mais je n'avais pas l'impression que ça l'expliquait assez bien. Je ne pouvais pas non plus obtenir leurs exemples à changer avec la taille de mon écran. J'ai essayé dans Safari, FF, Chrome.

Est-ce une fonctionnalité qui n'est pas encore prête pour l'implémentation?

Si je veux ajuster certains styles lorsque la fenêtre du navigateur a une largeur inférieure à 1024px. Comment puis je faire ça?

Answer 1

La règle appliquée à la taille de l'écran signifie que, en citant les spécifications du W3C « est utilisable sur l'écran et les appareils portatifs si la largeur de la fenêtre est » dans les limites spécifiées.

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

Si vous voulez régler le style lorsque la fenêtre est inférieure à 1024px vous pouvez utiliser cette règle:

@media screen and (max-width: 1024px) { … } 

de toute façon cette règle applique uniquement à la fenêtre taille réelle. Si vous redimensionnez la fenêtre sans recharger la page, les styles ne seront pas appliqués.

Answer 2

Pour appliquer une feuille de style à un document lorsqu'il est affiché sur un écran supérieur à 800 pixels de large:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" > 

Pour appliquer une feuille de style à un document lors de l'affichage sur un appareil à moins de 400 pixels de large:

<link rel="stylesheet" media="all and (max-device-width: 400px)" > 

intérieur

@media all and (max-width:800px) { 
    body { color: red; } 
} 

pour iphone

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

:: combining media query

Answer 3

Pour voir comment les différentes requêtes des médias réagissent sur Redimensionner ou changement d'orientation, essayez la démo sur cette page:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

Vous pouvez régler la requête des médias attribue à avoir une idée de la façon dont ils affectent une page .

Answer 4

Voici quelques projets qui permettent de résoudre cette question et sont à l'avant-garde des css dynamiques et tailles écran:

• 320 and up:

  « 320 et Up » empêche les appareils mobiles de le téléchargement des éléments de bureau par en utilisant la feuille de style d'un petit écran comme son point de départ.

• Lessframework:

  cadre moins est un système de grille CSS pour la conception de sites Web adaptatifs.Il contient 4 mises en page et 3 ensembles de préréglages de typographie , tous basés sur une grille unique .