Difference between revisions of "Media Queries"

From air
Jump to navigation Jump to search
(Created page with "https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries "Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la porté...")
 
 
Line 3: Line 3:
 
"Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même."
 
"Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même."
   
  +
Exemple (from https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries)
  +
<pre>
  +
<!-- Media Query CSS dans un élément link -->
  +
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
   
  +
<!-- Media Query CSS dans une feuille de style -->
  +
<style>
  +
@media (max-width: 600px) {
  +
.facet_sidebar {
  +
display: none;
  +
}
  +
}
   
  +
@media tv and (min-width: 700px) and (orientation: landscape) {…}
Exemples:
 
  +
  +
@media not all and (monochrome) { ... }
  +
  +
</style>
  +
  +
</pre>
  +
  +
  +
 
Exemples de sites:
 
* http://mediaqueri.es/
 
* http://mediaqueri.es/

Latest revision as of 10:42, 4 September 2014

https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries

"Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même."

Exemple (from https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries)

<!-- Media Query CSS dans un élément link -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- Media Query CSS dans une feuille de style -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

@media tv and (min-width: 700px) and (orientation: landscape) {…}

@media not all and (monochrome) { ... }

</style>


Exemples de sites: